javascript - 刷新过滤器(在项目上)而不更改 ng-repeat 模型

Question

我有一个过滤器，将日期格式设置为“时间之前”格式 (momentjs)。我希望过滤器值随着时间的推移“重新绘制”自身，而不更改模型。

例如:

• 当前日期将显示“几秒钟前”
• 一段时间后我想将值更改为“几分钟前”
• 等...

我要实现的功能示例 https://jsfiddle.net/u66aaz3u/1/

var app = angular.module('test', []);
app.filter('fromNow', function(){
	return function(value){
  	return moment(value).fromNow();
  }
});

app.controller('TestCtrl', function($scope, $interval){
	$scope.list = [
  	{
    	text: 'foo',
      date: moment()
    }
  ];
  
  var counter = 0
  $interval(function(){
  	counter++;
  	$scope.list[0].date = moment().subtract(counter, 'minutes');
  }, 1000)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="TestCtrl">
  <div ng-repeat="item in list">
    {{item.text}} - {{item.date | fromNow}}
  </div>
</div>

Answer 1

一种方法是有状态过滤器，如所述here .新过滤器定义的不同之处仅在于它包含 $stateful 标志:

app.filter('fromNow', function(){
    function fromNow(value){
    return moment(value).fromNow();
  }

  fromNow.$stateful = true;

  return fromNow;
});

而且您需要定期运行摘要，因此空间隔函数可以:

$interval(function() {
    // NOTHING
}, 2000);

检查一下 here .

但是，如上面链接的过滤器引用页中所述:

It is strongly discouraged to write filters that are stateful, because the execution of those can't be optimized by Angular, which often leads to performance issues. Many stateful filters can be converted into stateless filters just by exposing the hidden state as a model and turning it into an argument for the filter.

如果您实际上可以丰富模型，甚至使用替代 View 模型，以免污染您的主模型，那将会更有效。例如:

// in the controller:
  // watch so that you can respond to changes in the list; if not necessary, just omit this line (and)
  $scope.$watchCollection('list', calculateFromNowList);

  function calculateFromNowList(list) {
    $scope.fromNowList = list.map(function(x) {
        return x.date.fromNow();
    });
  }

  $interval(function() {
    calculateFromNowList($scope.list)
  }, 1000)

并且您不再需要过滤器，只需将模板更改为:

<div ng-repeat="item in list">
    {{item.text}} - {{fromNowList[$index]}}
</div>

上面的代码定期将“from now”字符串计算到一个单独的模型中并显示出来。相关fiddle here .

让我担心的是，这段代码每秒都会触发摘要循环，只是为了进行非常具体的更改。如果出现性能问题，使用几个指令和浏览器的 setInterval 直接更新 DOM 可能更有效，例如如 this fiddle .此解决方案是DIRTY，但在性能出现问题时作为最后的手段包含在这里。