CODEWITHSUNDEEP
angularjsangularjs-ng-include
Olezt
Olezt

Reputation: 1738

Recursive Ng-include causing Error: $rootScope:infdig Infinite $digest Loop

I have a recursive Ng-include which leads to Error: $rootScope:infdig Infinite $digest Loop

In my ctrl:

function getTemplate(elementType) {
        console.log(elementType + '_formElement.html');
        return elementType + '_formElement.html';
    };

In my view:

<div ng-repeat="element in elementList track by $index" ng-init="templateID=vm.getTemplate(element.elementType)">
    <ng-include src="templateID"></ng-include>
</div>

Result: 10 $digest() iterations reached. Aborting!

Watchers fired in the last 5 iterations: [[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":3},{"msg":"fn: function (a){return d(a)}","newVal":""},{"msg":"templateID","newVal":"ROW_formElement.html"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":3},{"msg":"fn: function (a){return d(a)}","newVal":""},{"msg":"templateID","newVal":"ROW_formElement.html"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":3},{"msg":"fn: function (a){return d(a)}","newVal":""},{"msg":"templateID","newVal":"ROW_formElement.html"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":3},{"msg":"fn: function (a){return d(a)}","newVal":""},{"msg":"templateID","newVal":"FIELD_formElement.html"}],[{"msg":"templateID","newVal":"TEXT_field.html"},{"msg":"fn: function (a){return d(a)}","newVal":""}]]

Console.log:

  ROW_formElement.html
7 ROW_formElement.html
  FIELD_formElement.html

I know I can increase TTL like following, but is there any other solution?

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

Upvotes: 0

Views: 616

Answers (2)

Daniel Xav De Oliveira
Daniel Xav De Oliveira

Reputation: 438

I had the same issue and I followed the advice on this link and it worked!:

Building Nested Recursive Directives in Angular

Upvotes: 0

Olezt
Olezt

Reputation: 1738

After searching a lot, I think there is no error in my code.

As answered here and shown in this plunkr this is just how angular works.
There seems to be no other solution other than setting a higher digest TTL number than 10.

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

Upvotes: 1

Related Questions