我在我的项目中遇到了这个错误。
为了说明这一点,我在http://plnkr.co/edit/LBXeqA5zL2dH5Zjlu6h1创建了一个 Plunker 。
实际上,当您在搜索框中输入任何内容时,会出现两个错误,一个是Error: 10 $digest() iterations reached. Aborting!
,另一个Uncaught Error: 10 $digest() iterations reached. Aborting!
似乎是一起出现的。
如何解决?
我在我的项目中遇到了这个错误。
为了说明这一点,我在http://plnkr.co/edit/LBXeqA5zL2dH5Zjlu6h1创建了一个 Plunker 。
实际上,当您在搜索框中输入任何内容时,会出现两个错误,一个是Error: 10 $digest() iterations reached. Aborting!
,另一个Uncaught Error: 10 $digest() iterations reached. Aborting!
似乎是一起出现的。
如何解决?
您不能像这样在过滤器上使用双向绑定,因为您的过滤器每次都返回一个新数组,并且摘要循环不断进行。您可以通过将您的项目与过滤器分开发送来解决此问题,然后使用$watch
它来监视您的 searchString 并$scope.filteredItems
动态创建。看这里:
http://plnkr.co/edit/xQR6zAYM9gB7siAXPqJs?p=preview
可能有一种方法可以发送filter
并filterType
一起发送为1,但我不知道该怎么做。
并阅读此答案以获取更多详细信息:-Angular.js 将过滤器传递给指令双向('=')属性
See the accepted answer here: Angular filter works but causes "10 $digest iterations reached"
To solve your problem, remove the filter from the ms-search-page's attribute: filtered-items="batches | searchBatch:searchString" -> filtered-items="batches"
当您对$scope
变量有嵌套依赖项时,会发生此错误。
每个作用域都经历一个“摘要循环”,Angular 会在这个循环中更新该作用域上值的所有更改。例如,如果您对范围有一些价值并且您更改了它(即设置$scope.val = 5;
或其他东西)。实际值发生了变化,但 Angular 并没有实际“应用”该更改,直到它通过摘要传递回来并注意到更改已经发生,然后在您的视图(html 文件)或其他其他地方更新该值它需要。这就是他们拥有这个$scope.$apply()
功能的原因,它基本上迫使 Angular 注意到你对$scope
.
说了这么多,这就是(我认为)你得到错误的原因。没有花很多时间查看您的 plunker,我认为问题在于您使用了两个嵌套searchBatch
过滤器。你<ms-search-pager>
在你看来是这样的:
<ms-search-pager filtered-items="batches | searchBatch:searchString" skip-items="skipItems" show-items="showItems" search-string="searchString"></ms-search-pager>
您的指令对您过滤的所有值都有双向绑定,如下所示:
scope: {
filteredItems: '=',
skipItems: '=',
showItems: '=',
searchString: '='
}
这意味着,只要您的范围内的任何值发生更改,无论是在您的指令中还是在您的控制器中,它都会在其他地方自动更新。但是,你也在做一个data-ng-change="skipItems=0"
内部部分,这将强制skipItems
每次按下按键时改变。这将导致$digest
您的示波器出现循环。但是您也使用相同的值来帮助searchBatch
过滤器,这也会导致摘要。
无论如何,长话短说,您手动完成了太多 Angular 将为您完成的工作。而且由于这些额外的工作,您有太多相关的 $scope 更改,这会创建一个无限递归的循环$digest()
循环。Angular 有个问题,如果它经历了 10 个递归$digest()
循环,它就会退出。
那么,你如何解决它?好吧,你知道你的代码比我好,所以这真的取决于你。我不确定您的所有依赖项都落在哪里,因此您必须遍历它并查看导致所有摘要调用的原因。我的猜测是您可以删除该data-ng-change="skipItems=0"
位并更多地专注于使用您的$scope
来查找更改,而不是尝试通过您的视图/指令来做到这一点。我知道这没有多大帮助,但我希望通过解释这些原则,您会发现问题所在并能够解决问题。对不起。