我需要在页面的几个地方使用 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 iterations 错误通常发生在观察者更改模型时。在错误情况下,隔离 fields
绑定(bind)绑定(bind)到过滤器的结果。该绑定(bind)创建了一个观察者。由于过滤器每次运行时都会从函数调用中返回一个新对象,因此它会导致观察器不断触发,因为旧值永远不会匹配新值(参见 this comment from Igor in Google Groups )。
一个好的解决方法是在这两种情况下绑定(bind) 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>'
};
注意:请记住关闭您的 fiddle 中的 sublist
标签。
关于javascript - Angular.js 将过滤器传递给指令双向 ('=' ) 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17198500/