10 $digest() iterations reached when using filter

1
votes

I'm try to use filter | filter: {pro: value}, but I have a very strange error : Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!...

In my controller, I just have $scope.slots = […].

My view is very simple : <div time-slots="slots | filter: {day:1}"></div>.

My directive is just templateUrl: 'time-slot.html', restrict: 'A', scope: { timeSlots: '=' }.

I'm totally lost with this error ... I don't understand what's wrong with my code. Here a plunker

Did I do something wrong ?

2
angularjsangularjs-directive

2 Answers

7
votes

You're creating an infinite sequence of $digests by using the following combination:

  • an isolated scope with = binding,
  • an expression with a filter passing into that binding.

Keep in mind that the = binding works both ways and that application of a filter creates a new collection. Thus, the following happens:

  1. Outer scope collection A is filtered, creating collection B, that is passed into the directive. Through the two-way = binding, it is set back on the outer scope, replacing A.
  2. Outer scope collection B is filtered, creating collection C, that is passed into the directive. ...
  3. ...

When AngularJS finds out that $digests are going round and round and still more are needed, it breaks with the abovementioned error.

4
votes

I cannot explain what's going on, but to avoid this problem you can pass previously filtered value to your directive

.controller('SettingsCtrl', function($scope, $filter){
    //$scope.slots = [.......]
    $scope.filtered = $filter('filter')($scope.slots,{day:1});
});

html:

<div time-slots="filtered"></div>

Or filter it inside directive for example in this way:

<div>
  <input ng-model="day">
  <div ng-repeat="slot in timeSlots | filter:{day:day}">
    <pre>{{slot|json}}</pre>

  </div>

</div>

http://plnkr.co/edit/JLfIuP9oVQ9cwo3i54UA?p=preview

Or in link function with:

$scope.timeSlots= $filter('filter')($scope.timeSlots,{day:1});