AngularJS 过滤器触发无限 $digest 循环答案

【问题标题】：AngularJS filter triggers infinite $digest loopAngularJS 过滤器触发无限 $digest 循环
【发布时间】：2014-03-25 14:48:16
【问题描述】：

我想使用像values | filter:value1 这样的过滤器表达式来隐藏或显示一个div，其中values 和value 都在包含指令的链接函数的范围内声明。

这按预期工作，只是它不断触发无限摘要循环错误。

查看这个 jsbin 进行演示：http://jsbin.com/nujineci/2/edit

我做错了什么？为什么过滤器没有更新模型时会出现这些错误？

【问题讨论】：

标签： angularjs angularjs-directive angularjs-filter

【解决方案1】：

问题的答案在 Angular 提供的错误描述中。

一个常见的错误是绑定到一个生成新的函数每次调用数组

这基本上就是过滤器所做的，每次它返回一个新数组：

// some more code
var filtered = [];
for ( var j = 0; j < array.length; j++) {
  var value = array[j];
  if (predicates.check(value)) {
    filtered.push(value);
  }
}
return filtered;

当 Angular 的摘要循环第一次运行时，它会得到一个包含 'bar' 的数组和一个空数组。然后 Angular 将再次运行摘要循环以检查模型是否稳定。它会得到新的数组（实例），它会认为模型已经改变。这将导致另一个摘要循环，依此类推。

您应该检查您的数组是否包含值和 ng-show 。例如。 Determine whether an array contains a value

查看这个修改后的 jsbin：http://jsbin.com/nujineci/5/edit

【讨论】：

【解决方案2】：

可能是因为在ng-show 内部使用了filter，过滤器在每个摘要周期中执行，并不断检查您的值是否已更改，如果值已更改，则它会再次评估并给出新结果，否则不会'不做任何事情（因为 angularJs 使用“脏检查”方法来查找任何更改）

http://jsbin.com/nujineci/4/edit

检查这个链接，我已经修改了

ng-show="g.values | filter:g.value1"

到

ng-show="g.values.indexOf(g.value1) != -1"

或ng-show="g.values.indexOf(g.value1) > -1" // 和上面一样

indexOf 如果存在于数组中则返回项的索引，否则返回-1

我使用这种语法，从来没有遇到过任何问题

【讨论】：