CODEWITHSUNDEEP
javascriptangularjs
k102
k102

Reputation: 8079

Recursive ng-include throws "10 $digest() iterations reached"

There's a tree structure I'm rendering by using recursive ng-repeat like this:

<div class="folder-item"
     ng-repeat="place in places"
    <div class="folder-children"
         ng-repeat="data in place.children"
         ng-include="'tree_item_renderer.html'">
    </div>
</div>

and the template:

<script type="text/ng-template"
            id="tree_item_renderer.html">
        <div>
            <!-- some irrelevant code -->

            <div ng-if="data.children">
                <div class="folder-children"
                     ng-repeat="data in data.children"
                     ng-include="'tree_item_renderer.html'"></div>
            </div>
        </div>
    </script>

This works just fine, until there's 10 or more levels deep, and then I'm getting 10 $digest() iterations reached error being thrown.

How do I fix it? I couldn't find any solution so far.

Upvotes: 0

Views: 523

Answers (2)

MoLow
MoLow

Reputation: 3084

the limit on 10 digest loops is there to prevent performance issues that will be caused by 10 inherited scopes (any change in one of the scopes will trigger the digest cycle to all the 10 scopes, which is a pretty expensive task.

as written in the docs you could change the number of maximum digest cycles, although you should take in mind:

Increasing the TTL could have performance implications, so you should not change it without proper justification.

increasing the number from ten would be done in the config block:

angular.module('myApp',[])
.config(function($rootScopeProvider) {
    $rootScopeProvider.digestTtl(number); //some number bigger then 10
})

the other way to do that, without the performance loss, is to to write a directive, which implements the recursion internally, and manages the changes internally to.

Upvotes: 2

Mo Binni
Mo Binni

Reputation: 255

Angular by default tracks objects by identity => try using track by $index in your ng-repeat:

ng-repeat="data in data.children track by $index"

Upvotes: 1

Related Questions