Angular.js pass filter to directive bi-directional ('=') attribute

Question

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 nai

Answer 1

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

Answer 2

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 -->