CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Desarrollo Desafio de Guerrero
Desarrollo Desafio de Guerrero

Reputation: 139

Why I'm getting this error in angularJS after do ng-include?

I decided to modularize the html and put some part of it in other html.

<div ng-include="'file.html'"></div>

When I run the application, the file.html file is loaded but in the console I get this error:

10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

I don't know what is wrong.

All the error here:

angular.min.js:1 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.9/$rootScope/infdig?p0=10&p1=%5B%5D
    at angular.min.js:1
    at l.$digest (angular.min.js:3)
    at l.$apply (angular.min.js:3)
    at g (angular.min.js:2)
    at x (angular.min.js:2)
    at XMLHttpRequest.m.onload (angular.min.js:2)
(anonymous) @ angular.min.js:1
$digest @ angular.min.js:3
$apply @ angular.min.js:3
g @ angular.min.js:2
x @ angular.min.js:2
m.onload @ angular.min.js:2

Upvotes: 1

Views: 348

Answers (4)

G.Ashok Kumar
G.Ashok Kumar

Reputation: 1633

The fastest solution to figure out which part of your app is causing this behavior is:

1.Remove all suspicious HTML - basically remove all your html from the template, and check if there are no warnings

2.If there are no warnings - add small parts of the html you removed and check if the problem is back

3.repeat step 2 until you get a warning - you will figure out which part of your html is responsible for the problem

4.investigate further - the part from step 3 is responsible for either mutating the objects on the $scope or is returning non-identical objects on each $digest cycle.

5.if you still have $digest iteration warnings after step 1, than you are probably doing something very suspicious. Repeat the same steps for parent template/scope/controller

You also want to make sure you are not altering the input of your custom filters

Keep in mind, that in JavaScript there are specific types of objects that don't behave like you would normally expect:

new Boolean(true) === new Boolean(true) // false
new Date(0) == new Date(0) // false
new String('a') == new String('a') // false
new Number(1) == new Number(1) // false
[] == [] // false
new Array == new Array // false
({})==({}) // false

and also check this

<ng-include src=" 'pathto/file.html' "></ng-include>

Upvotes: 0

gronostaj
gronostaj

Reputation: 2282

The file you're including contains code which produces non-repeatable results.

AngularJS will try to calculate all watched expressions twice. If results differ, it will keep on calculating them again and again up to 10 times until it gets the same thing twice in a row.

This error means that some observable code didn't produce the same result twice during the 10 calls limit. This happens for example if watched expressions use functions that return random results or mutate internal state. Make sure all watched expressions (including directive expressions) are pure, ie. don't affect app's internal state but only fetch values.

Upvotes: 1

Anton Stepanenkov
Anton Stepanenkov

Reputation: 1036

This error fires when path to .html file is incorrect. So check is file available and is it in the right place.

Upvotes: 1

Giovani Vercauteren
Giovani Vercauteren

Reputation: 1908

Make sure the path your referencing in the ngInclude is valid, if not you'll get an infinite digest loop.

Upvotes: 1

Related Questions