Since this was a problem I ran into myself the other day, I thought I’d document the problem and solution here in case it helps someone.
After adding some new code to your Angular app, you head to the browser and refresh. Nothing seems to be working. When you open up the browser console, you see messages like this:
Uncaught Error: 10 $digest() iterations reached. Aborting!
Something in your recent changes is causing something approaching an “infinite loop” in the Angular world.
This is the one that tripped me up recently:
Here’s a directive that calls a user-specified function when a button is clicked.
And here’s the directive being used in a contrived example. Note that it calls
updateStatus when the button is pressed…
updateStatus, we make a call to the server for some data.
What happens? Well, because the
onAction attribute in the directive above is specified as an
'=' binding, Angular will run and evaluate
ctrl.updateStatus() and try to set the value of
onAction. That’s not the right behavior – it should only execute
updateStatus when the button is clicked.
To fix this, the line
onAction: '=' should read
The problem is exacerbated by the fact that
updateStatus calls a function that returns a promise. This causes a new digest cycle to be run every time the
$http.get is called and again when the promise resolves – it’s a double whammy of terribleness.
Now is a good time to mention that you might (or, at least, I might) want to brush up on the different types of binding for isolate scopes in directives. The Angular docs on the Directive Definition Object cover those nicely.
Learning React can be a struggle -- so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, read my book Pure React.