在指令属性上使用filter会导致$ digest循环中的无限循环

Question

尝试在具有隔离范围的指令上使用过滤器：

<div tags="p.tags | refTags"></div>

在$ digest循环中导致无限循环：

当应用程序的模型变得不稳定并且每个$摘要周期触发状态更改和随后的$摘要周期时，会发生此错误。 Angular检测到这种情况并阻止无限循环导致浏览器无响应。

.directive 'tags', ->
    restrict: 'A'
    scope:
        tags: '='
    templateUrl: 'partials/tags.html'


.filter 'refTags', ->
    (tags) ->
        ['a filtered', 'array of values']

泛音/ tags.html

<ul>
    <li ng-repeat="tag in tags">{{tag.tag}}</li>
</ul>

控制器中的p.tags

p.tags = ['HTML5', 'CSS', 'JavaScript', 'Angular JS', 'Backbone JS', 'Node JS', 'SASS + Compass', 'Oragami', 'Running', 'Cat Food', '#catfood']

这种行为是正常的吗？

1. 过滤器不能用于传递到指令的隔离范围的值吗？
2. 有解决方法吗？我需要过滤数组值
3. 是否有其他设计不同的解决方案？

Answer 1

我不认为这是一个指令问题，而是一个过滤问题。过滤器的目标是将数组作为输入并基于某些规则和条件返回另一个数组，其中数组项具有与输入相同的结构。

导致$ digest循环中无限循环的原因是在过滤器中，每个摘要循环过滤器返回一个导致额外循环的不同对象。

我建议您先返回相同的数组，即input = output。检查一切是否按预期工作。之后添加相关条件。

Answer 2

This question provides an actual workaround

简而言之，也要将要使用的过滤器传递到指令中，然后在那里使用它。