CODEWITHSUNDEEP
angularjsnavigationangularjs-ng-repeatnavigationbar
dude
dude

Reputation: 6086

ng-repeat: 10 $digest() iterations reached

Assuming you have a really large navigation, with about 15 nested levels, like:

var app = angular.module("myApp", []);

app.controller("HomeCtrl", ["$scope", function($scope) {
  this.entries = [{
    "title": "test",
    "entries": [{
      "title": "sub-test",
      "entries": [{
        "title": "sub-test",
        "entries": [{
          "title": "sub-test",
          "entries": [{
            "title": "sub-test",
            "entries": [{
              "title": "sub-test",
              "entries": [{
                "title": "sub-test",
                "entries": [{
                  "title": "sub-test",
                  "entries": [{
                    "title": "sub-test",
                    "entries": [{
                      "title": "sub-test",
                      "entries": [{
                        "title": "sub-test",
                        "entries": [{
                          "title": "sub-test",
                          "entries": [{
                            "title": "sub-test"
                          }]
                        }]
                      }]
                    }]
                  }]
                }]
              }]
            }]
          }]
        }]
      }]
    }]
  }];
  return this;
}]);

And you are iterating over these with ng-repeat:

<script type="text/ng-template" id="entryTree">
  <span>{{ entry.title }}</span>
  <ol ng-if="entry.entries">
    <li ng-repeat="entry in entry.entries" ng-include="'entryTree'"></li>
  </ol>
</script>
<div ng-controller="HomeCtrl as ctrl">
  <ol>
    <li ng-repeat="entry in ctrl.entries" ng-include="'entryTree'"></li>
  </ol>
</div>

Demo

Then an $rootScope:infdig error will be thrown: 10 $digest() iterations reached. Aborting!. I know that there are couple of similar questions here (for example this one). But in my case I'm not returning a dynamic value from my controller nor do I use a dynamic getter, I'm just statically saving the value inside the controller.

What's the cause here? And how could a solution look like?

Upvotes: 1

Views: 999

Answers (1)

T J
T J

Reputation: 43156

Each iteration of your template is causing a new digest loop due to the ng-include. When a digest loop causes another, and cycles 10 times in such a way, angular assumes it could be an infinite loop and throws error.

Upvotes: 1

Related Questions