Angular.js передать фильтр в директиву двунаправленный ('=') атрибут

Question

Мне нужно использовать директиву 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']; 
    }); 

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

При попытке использовать фильтр я получаю эту ошибку:

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

Есть ли решение этой проблемы?

Answer 1

$ digest итерации Ошибка обычно возникает, когда есть наблюдатель, который изменяет модель. В случае ошибки привязка fields привязана к результату фильтра. Это привязка создает наблюдателя. Поскольку фильтр каждый раз возвращает новый объект из вызова функции, он вызывает постоянный запуск наблюдателя, потому что старое значение никогда не соответствует новому (см. this comment from Igor in Google Groups).

Хороший фикс будет связывать 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>' 
}; 

Примечание: не забудьте закрыть теги sublist в твоя скрипка.

Here is a fiddle

Answer 2

Corrected Fiddle

Проверить родственную пост here.

В скрипке вам нужно будет закрыть теги. Хотя у вас все еще есть теги, содержащие те, что у вас есть.

<sublist fields="fields" filter="'Rumba'"/> <!-- Tested in chrome -->