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

Question

我想使用过滤器表达式values | filter:value1来隐藏或显示div,where values和valueare都在包含指令的link函数的范围内声明.

这可以按预期工作,除了它不断触发无限的摘要循环错误.

请参阅此jsbin进行演示:http://jsbin.com/nujineci/2/edit

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

Answer 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.例如, 确定数组是否包含值

看看这个修改过的jsbin:http://jsbin.com/nujineci/5/edit

Answer 2

可能是因为在filter内部使用ng-show,过滤器在每个摘要周期中执行,并且继续检查你的值是否改变,如果值被改变则再次评估并给出新结果,否则它什么都不做(因为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返回item的索引,否则返回 -1

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