Bộ lọc thông qua angular.js để chỉ thị thuộc tính hai hướng ('=')

Question

Tôi cần sử dụng chỉ thị sublist ở một vài nơi trên trang và đôi khi phải có danh sách đầy đủ fields nhưng đôi khi được lọc. Dưới đây là cách tiếp cận ngây thơ của tôi:

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/

Khi tôi cố gắng sử dụng bộ lọc tôi nhận được lỗi này:

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

Có giải pháp cho vấn đề này không?

Answer 1

Số lần lặp lại thông báo $ $ thường xảy ra khi có người quan sát thay đổi mô hình. Trong trường hợp lỗi, sự ràng buộc cô lập fields bị ràng buộc với kết quả của một bộ lọc. Sự ràng buộc đó tạo ra một người quan sát. Vì bộ lọc trả về một đối tượng mới từ một lời gọi hàm mỗi khi nó chạy, nó làm cho trình theo dõi liên tục kích hoạt, vì giá trị cũ không bao giờ khớp với giá trị mới (Xem this comment from Igor in Google Groups).

Một sửa chữa tốt sẽ là để ràng buộc fields trong cả hai trường hợp như:

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

Và thêm một thuộc tính bắt buộc đối với trường hợp thứ hai để lọc:

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

Sau đó điều chỉnh chỉ thị của bạn như:

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

Lưu ý: Hãy nhớ đóng các thẻ sublist của bạn bằng fiddle của bạn.

Here is a fiddle

Answer 2

Corrected Fiddle

Kiểm tra một bài liên quan here.

Trong fiddle, bạn sẽ cần phải có thẻ đóng. Mặc dù bạn vẫn có thể có các thẻ tự chứa như thẻ bạn có.

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