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摘要周期会在过滤器中运行一次，然后再次重新评估以检查是否有任何更改。

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

因此修复可能是在控制器中运行一次过滤器，然后绑定到该结果。

e.g。

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

Fiddle

<强>更新

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

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

错误：[$ rootScope：infdig] 10 $ digest（）迭代在过滤器

1 个答案: