angular

Infinite Digest Cycle in Angular Directive

By Dave Ceddia

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.

The Problem

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.

angular.directive('actionButton', function() {
  return {
    restrict: 'E',
    template: '<button ng-click="triggerAction()">click me</button>',
    scope: {
      model: '=',
      onAction: '='   // this is a mistake, should be '&'
    },
    link: function(scope, elem, attrs) {
      scope.triggerAction = function() {
        // Call the user's function when the button is pressed
        scope.onAction();
      }
    }
  };
});

And here’s the directive being used in a contrived example. Note that it calls updateStatus when the button is pressed…

<div ng-controller="DemoCtrl as ctrl">
  <action-button on-action="ctrl.updateStatus()"></action-button>
  <div>{{ ctrl.status }}</div>
</div>

Then inside updateStatus, we make a call to the server for some data.

angular.controller('DemoCtrl', function($http) {
  var ctrl = this;

  ctrl.updateStatus = function() {
    $http.get('/status').then(function(res) {
      ctrl.status = res.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 onAction: '&'.

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, check out my Pure React workshop.

Pure React plant

Learn to think in React

  • 90+ screencast lessons
  • Full transcripts and closed captions
  • All the code from the lessons
  • Developer interviews
Start learning Pure React now

Dave Ceddia’s Pure React is a work of enormous clarity and depth. Hats off. I'm a React trainer in London and would thoroughly recommend this to all front end devs wanting to upskill or consolidate.

Alan Lavender
Alan Lavender
@lavenderlens