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 iterations通常、モデルを変更するウォッチャーがあるとエラーが発生します。エラーの場合、分離体fieldsバインディングはフィルタの結果にバインドされます。そのバインディングはウォッチャーを作成します。フィルタは、実行するたびに関数呼び出しから新しいオブジェクトを返しますので、古い値が新しい値と決して一致しないため、ウォッチャは引き続きトリガします（this comment from Igor in Google Groups参照）。

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

とフィルタリングのための第二の場合には、別のオプションの属性を追加します：

良い修正は次のように両方のケースでfieldsをバインドすることです

：

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