Angular.js Passfilter auf Direktive bidirektionale ('=') Attribut

Question

Ich brauche sublist Direktive an wenigen Stellen der Seite, und es sollte manchmal volle fields Liste enthalten, aber manchmal gefiltert. Hier ist mein naiver Ansatz:

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/

Wenn ich versuche, Filter zu verwenden ich diesen Fehler:

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

Gibt es eine Lösung für dieses Problem?

Answer 1

Der $ Digest Iterationen Fehler tritt in der Regel auf, wenn ein Watcher das Modell ändert. Im Fehlerfall ist die Bindung des Isolats fields an das Ergebnis eines Filters gebunden. Diese Bindung erzeugt einen Beobachter. Da der Filter jedes Mal, wenn er ausgeführt wird, ein neues Objekt von einem Funktionsaufruf zurückgibt, wird der Watcher kontinuierlich ausgelöst, weil der alte Wert niemals mit dem neuen übereinstimmt (siehe this comment from Igor in Google Groups).

wäre ein gutes fix fields in beiden Fällen wie zu binden sein:

<sublist fields="fields" /></sublist> 

Und ein weiteres optionales Attribut auf den zweiten Fall für die Filterung hinzufügen:

<sublist fields="fields" filter-by="'Rumba'" /></sublist> 

dann Ihre Direktive wie anpassen:

return { 
    restrict: 'E', 
    scope: { 
     fields: '=', 
     filterBy: '=' 
    }, 
    template: '<div ng-repeat="f in fields | filter:filterBy">'+ 
       '<small>here i am:</small> {{f}}</div>' 
}; 

Hinweis: Denken Sie daran, Ihre sublist Tags zu schließen deine Geige.

Here is a fiddle

Answer 2

Corrected Fiddle

Überprüfen Sie ein Ergebniss zu here.

In der Geige müssen Sie schließende Tags haben. Sie können immer noch eigenständige Tags wie das, das Sie haben, haben.

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