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

Question

我想使用类似于values | filter:value1的过滤表达式来隐藏或显示一个div，其中values和value都在包含指令链接函数中声明的作用域内。
这可以正常工作，但却不停地触发无限循环错误。
查看此jsbin进行演示：http://jsbin.com/nujineci/2/edit
我做错了什么？为什么在没有模型被过滤器更新的情况下会出现这些错误？

- Nat

Answer 1

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

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

这基本上就是filter所做的事情，每次它都会返回一个新的数组：

// 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的脏检查循环（digest loop）第一次运行时，它会得到一个包含'bar'和空数组的数组。然后Angular将再次运行脏检查循环以检查模型是否稳定。它将获得新的数组实例，并认为模型已更改。这将导致另一个脏检查循环，以此类推。

你应该检查数组是否包含值，并在ng-show上使用它。例如： Determine whether an array contains a value 查看这个修改后的jsbin：http://jsbin.com/nujineci/5/edit

- lpiepiora

Answer 2

由于在ng-show中使用了filter，每次digest循环时都会执行过滤器，并且会不断检查值是否已更改。如果值已更改，则重新评估并给出新结果；否则，它不执行任何操作（因为AngularJS使用“脏检查”方法来查找任何更改）。请查看此链接：http://jsbin.com/nujineci/4/edit，我已进行了修改。

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

To

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

或者 ng-show="g.values.indexOf(g.value1) > -1" // 这与上面是一样的

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

我经常使用这种语法，从未遇到过任何问题。

- Vamsi