angularjsangularjs-ng-include

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


Solution

  • 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 })