错误：[$rootScope:infdig] 10 $digest() 达到的迭代发生在过滤器中

Question

我已尝试了有关此问题的所有答案，但找不到消除此错误的方法。我很确定这个过滤器函数是导致上述错误的原因。

.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;
    };
})

我尝试将逻辑放入控制器函数中。但它也会产生同样的错误。

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

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

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

更新

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

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

controller.js：

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

filter.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;
    };
})

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

Answer 1

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

Angular 摘要循环遍历过滤器一次，然后再次重新评估以检查是否有任何变化。

由于您的过滤器会在结果中创建新对象，因此即使数据具有相同的结构，也会将其视为更改并触发另一个摘要循环。以此类推。

因此解决方法可能是在控制器中运行一次过滤器，然后绑定到结果。

例如

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

Fiddle

更新

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

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