我需要在页面的几个位置使用sublist
指令,它有时应包含完整的fields
列表,但有时应进行过滤。这是我的幼稚方法:
HTML:
<div ng-controller="MainCtrl">
<sublist fields="fields" /> <!-- This one is OK -->
<sublist fields="fields | filter: 'Rumba'" /> <!-- This one raises error -->
</div>
Javascript:
angular.module('myApp', [])
.directive('sublist', function () {
return {
restrict: 'E',
scope: { fields: '=' },
template: '<div ng-repeat="f in fields">{{f}}</div>'
};
})
.controller('MainCtrl', function($scope) {
$scope.fields = ['Samba', 'Rumba', 'Cha cha cha'];
});
当我尝试使用过滤器时,出现此错误:
Error: 10 $digest() iterations reached. Aborting!
是否有解决此问题的方法?
$ digest迭代错误通常在有观察者更改模型时发生。在错误情况下,隔离fields
绑定将绑定到过滤器的结果。该绑定创建了一个观察者。由于过滤器每次运行时都会从函数调用中返回一个新对象,因此它将导致监视程序不断触发,因为旧值永远不会与新值匹配(请参见this comment from Igor in Google Groups)。
一个很好的解决办法是在两种情况下都绑定fields
:
<sublist fields="fields" /></sublist>
并在第二种情况下添加另一个可选属性以进行过滤:
<sublist fields="fields" filter-by="'Rumba'" /></sublist>
然后调整您的指令,如:
return {
restrict: 'E',
scope: {
fields: '=',
filterBy: '='
},
template: '<div ng-repeat="f in fields | filter:filterBy">'+
'<small>here i am:</small> {{f}}</div>'
};
注意:记住关闭小提琴中的sublist
标签。
检查相关帖子here。
在小提琴中,您将需要有结束标签。虽然您仍然可以像自己拥有的那样拥有自包含标签。
<sublist fields="fields" filter="'Rumba'"/> <!-- Tested in chrome -->