javascript - 在 AngularJS 中重新评估定时器过滤器

Question

我有一个过滤器，用于显示相对时间，即 5 分钟前。我希望能够使这个过滤器(或编写指令)每分钟重新评估一次。我该怎么做？

JS 过滤器

m.filter('relativeTime', function () {
    return function (input, showAgo) {
        if (typeof showAgo == "undefined") {
            showAgo = true;
        }

        var dateMoment = input;
        if (typeof input == "string") {
            dateMoment = moment(input);
        }

        return dateMoment.fromNow(showAgo);
    };
});

HTML

<span class="relativeTime">{{activity.Time | relativeTime }}</span>

Answer 1

尽管可以创建有状态过滤器，但文档 strongly advices只制作无状态和幂等的过滤器。这就是为什么指令在这里是更好的主意。

原理很简单:编译指令时，创建一个每分钟刷新一次值的定时器。 $interval service非常适合这个目标。但是，如文档所述，当您不再需要它时，请不要忘记销毁它。

MyApp.directive('relativeTime', function ($interval) {
    return {
        scope: {
            time: '=',
        },
        template: '<div>{{relativeTime}} secondes ago.</div>',
        link: function ($scope) {
            $scope.relativeTime = 0;

            var intervalPromise = $interval(function () {
                ++$scope.relativeTime;
            }, 1000);

            $scope.$watch('time', function (time) {
                var currentTime = new Date();
                $scope.relativeTime = Math.round((currentTime.getTime() - time.getTime()) / 1000);
            });

            $scope.$on('$destroy', function () {
                $interval.cancel(intervalPromise);
            });
        },
    };
});

Fiddle

出于演示目的，该指令非常简单并且每秒更新一次。但是，根据您的用例，尤其是您的 date.fromNow() 函数调整它应该不难。