错误：[$ rootScope：infdig] 10 $ digest（）迭代在过滤器中发生 [英] Error: [$rootScope:infdig] 10 $digest() iterations reached happens in filter

问题描述

我已尝试过有关此问题的所有答案，但我找不到删除此错误的方法。我确定这个过滤器功能导致上述错误。

I have tried all the answers regarding this question but I can't find a way to remove this error. I'm damn sure that this filter function is responsible for causing the above mentioned error.

.filter('collect_ingredients', function() {
    return function(input) {
        if (!angular.isArray(input)) {
            return input;
        }

        var result = {};
        angular.forEach(input, function(value){
            if (!result[value.code]) {
                result[value.code] = {
                    statement: value.statement,
                    code: value.code,
                    ingredients: [value.ingredient]
                };
            } else {
                result[value.code].ingredients.push(value.ingredient);
            }
        });

        return result;
    };
})

我尝试将逻辑放在控制器功能中。但它也会产生相同的错误。

I tried putting the logic inside a controller function. But it also produces the same error.

ionic.bundle.js:21157 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn:

以下是负责调用上述过滤器的模板代码。

Here is the template code responsible for calling the above filter.

<div class="row" ng-repeat="hStatement in foo.bar|collect_ingredients">

更新

我尝试在控制器中创建一个函数，该函数接受foo.bar作为输入并返回更改后的列表。

I tried creating an function in the controller which accepts foo.bar as input and returns the altered list.

<div class="row" ng-repeat="hStatement in getIngredientsFromFilter(foo.bar)">

controller.js：

controller.js:

$scope.getIngredientsFromFilter = function(input_lst) {
   return $filter("collect_ingredients")(input_lst);
}

过滤器。 js：

.filter('collect_ingredients', function() {
    return function(input) {
        if (!angular.isArray(input)) {
            return input;
        }

        var result_lst = [];
        var result_dict = {};
        angular.forEach(input, function(value){
            var dict = {};
            if (!result_dict[value.code]) {
                dict = {
                    statement: value.statement,
                    code: value.code,
                    ingredients: [value.ingredient]
                };
                result_dict[value.code] = dict;
                result_lst.push(dict);
            } else {
                result_dict[value.code].ingredients.push(value.ingredient);
                result_lst.push(result_dict[value.code]);
            }
        });

        return result_lst;
    };
})

但这也会产生同样的错误..

But this also produces the same error..

推荐答案

问题不在于过滤器，而在于您直接绑定到视图中过滤器的结果，以及过滤器每次运行时都会在结果中创建新对象。

The problem isn't exactly with the filter but with the fact that you are binding directly to the results of the filter in your view, and the filter creates new objects within the results every time it is run.

Angular摘要循环在过滤器中运行一次，然后再次重新计算以检查是否有任何变化。

The Angular digest cycle runs through the filter once and then re-evaluates again to check if anything has changed.

因为您的过滤器在结果中创建了新对象，所以即使数据具有相同的结构，也会将其作为更改进行拾取并触发另一个摘要周期。等等。

Because your filter creates new objects within the results, this is picked up as a change and another digest cycle is triggered even though the data has the same structure. And so on.

所以修复可能是在你的控制器中运行一次过滤器，然后绑定到它的结果。

So the fix could be to run the filter once within your controller, then bind to the results of that.

例如

$scope.result = $filter("collect_ingredients")($scope.foo.bar);

小提琴

更新

您的代码更新有类似的问题，因为当重复调用函数 getIngredientsFromFilter 时，每次都会返回带有新对象的结果，并重新触发摘要周期。

The code in your update has a similar issue because when the function getIngredientsFromFilter is called repeatedly, a result with new objects is returned each time, and the digest cycle re-triggers.

我建议引入一个指令来处理嵌套的 ng-repeat ，然后处理指令控制器中的过滤器（再次避免多次为同一输入调用过滤器）。请点击此处查看更新的小提琴。

I'd suggest introducing a directive to handle the nested ng-repeat, then dealing with the filter in the directive controller (again to avoid calling the filter multiple times for the same input). See updated Fiddle here.

这篇关于错误：[$ rootScope：infdig] 10 $ digest（）迭代在过滤器中发生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！