I need to use sublist directive in few places of the page, and it should contain sometimes full fields list, but sometimes filtered. Here is my naive approach:
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'];
});
When I try to use filter I'm getting this error:
Error: 10 $digest() iterations reached. Aborting!
Is there a solution for this problem?
The $digest iterations error typically happens when there is a watcher that changes the model. In the error case, the isolate fields binding is bound to the result of a filter. That binding creates a watcher. Since the filter returns a new object from a function invocation each time it runs, it causes the watcher to continually trigger, because the old value never matches the new (See this comment from Igor in Google Groups).
A good fix would be to bind fields in both cases like:
<sublist fields="fields" /></sublist>
And add another optional attribute to the second case for filtering:
<sublist fields="fields" filter-by="'Rumba'" /></sublist>
Then adjust your directive like:
return {
restrict: 'E',
scope: {
fields: '=',
filterBy: '='
},
template: '<div ng-repeat="f in fields | filter:filterBy">'+
'<small>here i am:</small> {{f}}</div>'
};
Note: Remember to close your sublist tags in your fiddle.