How to trigger a method when Angular is done adding scope updates to the DOM?

The $evalAsync queue is used to schedule work which needs to occur outside of current stack frame, but before the browser’s view render. — http://docs.angularjs.org/guide/concepts#runtime

Okay, so what’s a “stack frame”? A Github comment reveals more:

if you enqueue from a controller then it will be before, but if you enqueue from directive then it will be after. — https://github.com/angular/angular.js/issues/734#issuecomment-3675158

Above, Misko is discussing when code that is queued for execution by $evalAsync is run, in relation to when the DOM is updated by Angular. I suggest reading the two Github comments before as well, to get the full context.

So if code is queued using $evalAsync from a directive, it should run after the DOM has been manipulated by Angular, but before the browser renders. If you need to run something after the browser renders, or after a controller updates a model, use $timeout(..., 0);

See also https://stackoverflow.com/a/13619324/215945, which also has an example fiddle that uses $evalAsync().

Leave a Comment