Angular.js通過過濾器指令的雙向（'='）屬性

我需要在頁面的少數幾個地方使用sublist指令，它應該包含有時會列出完整的fields列表，但有時會被過濾。這裏是我的幼稚的做法：Angular.js通過過濾器指令的雙向（'='）屬性

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!

有沒有解決這個問題的方法？

來源

2013-06-19 Dfr

$摘要迭代當有一個觀察者改變模型時，通常會發生錯誤。在錯誤情況下，隔離區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

來源

2013-06-19 19:39:54 sh0ber

+1爲解釋和參考。 –

如果您可能需要多個過濾器，排序等，該怎麼辦？是否有通用的解決方案將任何通用的過濾/排序列表傳遞給指令？ –

@EugeneOsovetsky：在這一點上，通過在那裏注入'$ filter'，在指令鏈接/控制器函數中完成繁重的工作可能更加容易/必要。（即，這個Q＆A上下文是視圖，而不是MVC範例的控制器部分。控制器允許更多複雜性。）請參閱[stackoverflow.com/a/14302334/2185093](http://stackoverflow.com/a/14302334/2185093）以獲取更多信息 – sh0ber

Corrected Fiddle

查了相關的帖子here。

在小提琴中，您將需要關閉標籤。雖然你仍然可以擁有像你所擁有的自包含標籤。

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

來源

2013-06-19 20:19:23

您也可以在控制器的作用域中擁有'過濾的'數據。爲此，您需要在控制器中注入''$ filter'服務'。包含的參考顯示了此。 –

您可以[編輯]和更新您的答案，而不是在通訊中添加信息.... –

Angular.js通過過濾器指令的雙向（'='）屬性

回答

相關問題