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

【问题标题】：Using filter on directive attribute causes infinite loop in $digest cycle在指令属性上使用过滤器会导致 $digest 循环中的无限循环
【发布时间】：2014-02-01 17:15:59
【问题描述】：

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

<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>

控制器中的 p.tags

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

这种行为正常吗？

不能对传入指令隔离范围的值使用过滤器吗？
有解决办法吗？我需要过滤数组值
还有其他设计不同的解决方案吗？

【问题讨论】：

这不是完整的 refTags 过滤器吗？你能分享那个代码吗？
是的，就是这样。如果这引起任何混乱，那就是咖啡脚本
所以您的过滤器实际上返回了一个数组，其中包含两个项“过滤”和“值数组”......它实际上是如何过滤这些值的？
=是双向绑定，如果被过滤了怎么绑定回来？我会想象它正在绑定到 p.tags，再次触发过滤器，更新值，然后绑定再次触发过滤器......一遍又一遍
@Janathan Rowny 没有过滤发生我只是在测试

标签： angularjs coffeescript

【解决方案1】：

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

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

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

【讨论】：

同意，如果您只是在过滤器中返回一个任意数组，Angular 将无法识别您的过滤器返回的模型，并且摘要会继续进行。
谢谢马克西姆和乔纳森。这样就搞清楚了。优秀
@TaylorMac 如果您曾经在模型上使用console.log()，您会看到 Angular 为它分配了一堆东西来跟踪它。这是 Angular 难以使用原语的另一个原因，因为它无法将元数据分配给字符串。

【解决方案2】：

This question provides an actual workaround.

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

【讨论】：

您绝对应该链接原始问题/答案，但将显着细节拉入此问题并将其直接应用于此处提出的问题。或者，如果问题相同，您可以将其中一个标记为重复。