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

在$消化迭代错误通常发生在有改变模型中的守望者.在错误情况下,隔离fields绑定绑定到过滤器的结果.该绑定创建了一个观察者.由于过滤器每次运行时都会从函数调用中返回一个新对象,因此会导致观察者不断触发,因为旧值永远不会与新值匹配(请参阅Google Groups中Igor的此评论).

一个很好的解决方法是绑定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小提琴中的标签.

这是一个小提琴