angularjs - 在指令属性上使用过滤器会导致 $digest 循环中的无限循环

Question

尝试在具有隔离作用域的指令上使用过滤器:

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

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

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

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


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

partials/tags.html

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

Controller 中的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

我觉得不是指令问题而是过滤问题。 filter 的目标是获取一个数组作为输入，并根据一些规则和条件返回另一个数组，其中数组项与输入具有相同的结构。

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

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