刷新筛选器(在项上)而不更改ng-重复模型

Question

我有一个过滤器，它将日期格式化为“时间前”格式(动量)。我希望筛选值随着时间的推移“重新绘制”自己，而不改变模型。

例如：

• 时装秀“几秒钟前”
• 过了一段时间，我想把这个值改为“几分钟前”。
• ect。

关于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

一种方法是状态过滤器，正如描述的这里。新的过滤器定义的不同之处在于它包含了$stateful标志：

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

  fromNow.$stateful = true;

  return fromNow;
});

而且您需要定期运行摘要，所以一个空的interval函数可以：

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

看看这里。

但是，如上面链接的过滤器参考页面中所指出的：

我们强烈反对编写有状态的过滤器，因为这些过滤器的执行不能通过角进行优化，这通常会导致性能问题。许多有状态过滤器可以转换为无状态过滤器，只需将隐藏状态公开为模型并将其转换为过滤器的参数即可。

如果您能够实际丰富模型，甚至使用另一种视图模型，以避免污染您的主要模型，这将是更有效的。例如：

// 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>

上面的代码定期将“从现在起”字符串计算成一个单独的模型，并显示它。相关小提琴这里。

我担心的是，这段代码每秒钟触发一次摘要周期，只是为了一个非常特定的更改。如果出现性能问题，使用一些指令和浏览器的setInterval直接更新DOM可能会更有效，例如在这把小提琴中。这个解决方案是脏，但在性能出现问题时作为最后手段在这里包含。