我正在为datetime对象使用自定义angular.js过滤器:
function relativeTimeFilter()
{
return function (dateObj) {
return getRelativeDateTimeString(dateObj);
};
}
function getRelativeDateTimeString(dt)
{
if(!dt) return "undefined ago";
var delta = dt.getSeconds();
if (delta < 0) return "not yet";
if (delta < 1 * 60) return delta == 1 ? "one second ago" : delta + " seconds ago";
if (delta < 2 * 60) return "a minute ago";
if (delta < 45 * 60) return Math.floor(delta/60) + " minutes ago";
if (delta < 90 * 60) return "an hour ago";
if (delta < 24 * (60*60)) return Math.floor(delta/60/60) + " hours ago";
if (delta < 48 * (60*60)) return "yesterday";
if (delta < 30 * (24 * (60*60))) return Math.floor(delta/60/60/24) + " days ago";
if (delta < 12 * (30 * (24 * (60*60))))
{
var months = Math.floor(delta/60/60/24/30);
return (months <= 1) ? "one month ago" : (months + " months ago");
}
else
{
var years = Math.floor(delta/60/60/24/365);
return (years <= 1) ? "one year ago" : (years + " years ago");
}
}
module.filter("relativetime", relativeTimeFilter);
此时,我使用的过滤器(我认为)并不重要。过滤器接收Datetime对象。相对时间声明仅有效一秒钟。含义one second ago
必须在一秒钟之后更新为2 seconds ago
,依此类推。
当我应用过滤器时,这只发生一次。那么如何定期触发过滤设备?
我尝试了以下内容:
setInterval(function() {$scope.$apply()}, 1000) // placed in controller function
......没有成功。
有什么想法吗?
答案 0 :(得分:7)
我认为您无法使用过滤器实现此目的。 $scope.$apply()
不起作用的原因是因为它正在监视数据的更改。由于数据实际上没有改变,因此永远不会再次调用过滤器。
相反,您需要调整控制器中正在查看的数据。使用$timeout
代替setInterval
,因为它内置于消化生命周期中。
我会考虑使用指令来做到这一点。
app.directive('relativeTime', function($timeout) {
function update(scope, element) {
element.text(getRelativeDateTimeString(scope.actualTime));
$timeout(function() { update(scope, element); }, 1000);
}
return {
scope: {
actualTime: '=relativeTime'
},
link: function(scope, element) {
update(scope, element);
}
};
});
所以你可以使用这样的指令:
<div relative-time="theDate"></div>
另外,我在getRelativeDateTimeString
函数中发现了一个漏洞。您需要将delta与当前时间相关联。 getSeconds
只给出给定时间的秒数:
var delta = parseInt(((new Date().getTime()) - dt.getTime()) / 1000);
这是一个有效的CodePen。
答案 1 :(得分:2)