无限$ digest（）循环使用html属性上的过滤器表达式的AngularJS

Question

当我尝试在组件的属性中传递过滤器表达式时，例如（请参阅此Plunker example以及下面列出的可能解决方案。）

<todo-list todos="$ctrl.todos | filter:{type:1}"></todo-list>

我在无限消化循环上出错，我不明白为什么：

Error: [$rootScope:infdig] http://errors.angularjs.org/1.6.3/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…e%2C%22type%22%3A1%2C%22%24%24hashKey%22%3A%22object%3A5%22%7D%5D%7D%5D%5D
    at eval (angular.js:38)
    at m.$digest (angular.js:18048)
    at m.$apply (angular.js:18280)
    at eval (angular.js:1912)
    at Object.invoke (angular.js:5003)
    at c (angular.js:1910)
    at Object.Pc [as bootstrap] (angular.js:1930)
    at execute (VM877 main.ts!transpiled:21)
    at f (system.js:5)
    at Object.execute (system.js:5)

代码，请参阅Plnkr： http://plnkr.co/edit/JdiLEIyji2pHd3eeNMUL?p=preview

屏幕截图/图片：

解决方法/溶液： 我有几个解决方法/解决方案：

1. 在我最初遇到问题的回购中：我做了<todo-list todo-items="$ctrl.todoItems" filter-by="{completed:true}"></todo-list>。有关完整来源，请参阅此处：https://github.com/aredfox/todo-angularjs-typescript/commit/e71900b96173b63ebcebb8e6c1fba00fe3997971。 但我觉得它正在解决问题，加上我不明白为什么会触发$ digest（）循环以及为什么它不应该只是起作用。

2. @Mistalis https://stackoverflow.com/a/43120388/1155847回答了类似的解决方案。

Answer 1

  

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

     

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

我建议你将过滤器移到todoList指令：

<div ng-repeat="todo in $ctrl.todos | filter: {type:1}">
    <span>{{todo.name}}</span>
</div>

如果type需要是动态的，请将其作为参数/属性传递给指令。

Forked your Plunker

Answer 2

在angular.js回购中有一个未解决的问题，你可以跟进，以便了解这个问题的演变： https://github.com/angular/angular.js/issues/14039

作为临时解决方案，您可以更改绑定以使用浅层双向绑定，方法是将<更改为=*，如下所述：https://github.com/angular/angular.js/issues/14039#issue-133588717 Il8PNgcE P =预览