Angular.js 将过滤器传递给指令双向（'='）属性答案

【问题标题】：Angular.js pass filter to directive bi-directional ('=') attributeAngular.js 将过滤器传递给指令双向（'='）属性
【发布时间】：2013-06-19 18:19:59
【问题描述】：

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

这个问题有解决办法吗？

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-ng-repeat angularjs-filter

【解决方案1】：

$digest 迭代 错误通常发生在有观察者更改模型时。在错误情况下，隔离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

【讨论】：

如果您可能需要多个过滤器、排序等怎么办？是否有通用解决方案将任何通用过滤/排序列表传递给指令？
@EugeneOsovetsky：在这一点上，通过在那里注入$filter 在指令链接/控制器功能中完成繁重的工作可能更容易/必要。（即这个 Q&A 上下文是视图，而不是 MVC 范例的控制器部分。控制器允许更多复杂性。）请参阅stackoverflow.com/a/14302334/2185093 了解更多信息

【解决方案2】：

Corrected Fiddle

查看相关帖子here。

在小提琴中你需要有结束标签。虽然您仍然可以拥有与您所拥有的标签一样的自包含标签。

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

【讨论】：

您还可以在控制器范围内拥有filtered 数据。为此，您需要在控制器中注入'$filter' service。包含的参考显示了这一点。