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