15

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'];
    });

http://jsfiddle.net/GDfxd/14/

When I try to use filter I'm getting this error:

Error: 10 $digest() iterations reached. Aborting!

Is there a solution for this problem?

Dan
  • 59,490
  • 13
  • 101
  • 110
Dfr
  • 4,075
  • 10
  • 40
  • 63

2 Answers2

24

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.

Here is a fiddle

Dan
  • 59,490
  • 13
  • 101
  • 110
  • What if you potentially need multiple filters, sorts, etc? Is there a general solution to pass any general filtered/sorted list to a directive? – Eugene Osovetsky Jan 23 '16 at 20:40
  • @EugeneOsovetsky: At that point it's probably easier/necessary to do the heavy lifting in the directive link/controller function by injecting `$filter` there. (i.e. This Q&A context is the view, rather than the controller part of the MVC paradigm. The controller allows for much more complexity.) See [stackoverflow.com/a/14302334/2185093](http://stackoverflow.com/a/14302334/2185093) for more info – Dan Sep 02 '16 at 21:22
1

Corrected Fiddle

Check a related post here.

In the fiddle you will need to have closing tags. While you can still have self contained tags like the one you have.

 <sublist fields="fields" filter="'Rumba'"/> <!-- Tested in chrome -->
Community
  • 1
  • 1
hitesh israni
  • 1,742
  • 4
  • 25
  • 48
  • you can also have `filtered` data in your controller's scope. for that you will need to inject `'$filter' service` in your controller. included reference shows this. – hitesh israni Jun 19 '13 at 20:31