Angular.js将过滤器传递给指令双向('=')属性

Angular.js pass filter to directive bi-directional ('=') attribute

本文关键字：属性 过滤器 js 指令 Angular      更新时间：2023-09-26

我需要在页面的几个地方使用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!

这个问题有解决办法吗?

$digest iterations错误通常发生在监视器更改模型时。在错误情况下，隔离fields绑定绑定到一个过滤器的结果。该绑定创建了一个监视程序。由于过滤器每次运行时都会从函数调用返回一个新对象，因此它会导致监视器不断触发，因为旧值永远不会与新值匹配(参见Google Groups中Igor的注释)。

一个好的修复方法是在这两种情况下绑定fields，如:

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

并在第二个case中添加另一个可选属性:

<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标签在你的小提琴。

这里是小提琴

校正后的小提琴

点击此处查看相关文章

在正文中，您需要有结束标记。虽然你仍然可以拥有像你这样的自包含标签。

 <sublist fields="fields" filter="'Rumba'"/> <!-- Tested in chrome -->
相关文章：