javascript - 在不更改 $scope 的情况下强制重新编译过滤后的 ng-attr

Question

我正在编写一个聊天应用程序，我希望在其中的消息上具有人类可读的相对时间戳。我正在使用一个接受 JS 时间戳的过滤器，并且(使用 Moment.js 库)输出一个表示相对时间的字符串(例如“几秒钟前”)。以下是相关代码摘录:

HTML:

<li ng-attr-title="{{timestamp | moment}}"></li>

JS:

angular.module("ChatApp").
filter("moment",function(){
    return function(jstimestamp){
        //using the Moment.js library to create a relative-time string
        return moment(parseInt(jstimestamp)).fromNow();
    }
});

即使 $scope.timestamp 永远不会改变，我如何强制 AngularJS 定期重新计算 ng-attr-title，以便更新“几秒钟前”到“一分钟前”等等？目前它仅在页面重新加载时更新。

Answer 1

您可以尝试使您的过滤器有状态，这样即使输入值没有改变，它也会对每个摘要进行评估。

angular.module("ChatApp").
filter("moment", function() {

  function innerFilter(jstimestamp) {
    //using the Moment.js library to create a relative-time string
    return moment(parseInt(jstimestamp)).fromNow();
  }
  innerFilter.$stateful = true;

  return innerFilter;
});

您可以在 Controller 中添加一个间隔，使其在没有用户输入的情况下工作。

var intervalPromise = $interval(function() {}, 1000);

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

不需要在间隔内调用应用程序，因为 $interval 的每个滴答都会触发一个摘要循环。

您可以看到一个工作示例 here .

您可以在文档页面中找到有关状态过滤器的更多信息 here .