|
2 | 2 | @name $rootScope:inprog
|
3 | 3 | @fullName Action Already In Progress
|
4 | 4 | @description
|
| 5 | + |
| 6 | +At any point in time there can be only one `$digest` or $apply operation in progress. |
| 7 | +The stack trace of this error allows you to trace the origin of the currently executing $apply or $digest call. |
| 8 | + |
| 9 | +`$digest` or `$apply` are processing operational states of the Scope - data-structure in Angular that provides context for models and enables model mutation observation. |
| 10 | + |
| 11 | +Trying to reenter a `$digest` or `$apply` while one of them is already in progress is typically a sign of programming error that needs to be fixed. |
| 12 | + |
| 13 | +This error is often seen when interacting with an API that is sometimes sync and sometimes async. |
| 14 | + |
| 15 | +For example: |
| 16 | + |
| 17 | +``` |
| 18 | +function MyController() { |
| 19 | + thirdPartyComponent.getData(function(someData) { |
| 20 | + scope.$apply(function() { |
| 21 | + scope.someData = someData; |
| 22 | + }); |
| 23 | + }); |
| 24 | +} |
| 25 | +``` |
| 26 | + |
| 27 | +The controller constructor is always instantiated from within an $apply cycle, so if the third-party component called our callback synchronously, we'd be trying to enter the $apply again. |
| 28 | + |
| 29 | +To resolve this type of issue, either fix the api to be always synchronous or asynchronous or wrap the call to the api with setTimeout call to make it always asynchronous. |
| 30 | + |
| 31 | + |
| 32 | +Other situation that leads to this error is when you are trying to reuse a function to by using it as a callback for code that is called by various apis inside and outside of $apply. |
| 33 | + |
| 34 | +For example: |
| 35 | + |
| 36 | +``` |
| 37 | +myApp.directive('myDirective', function() { |
| 38 | + return { |
| 39 | + link: function($scope, $element) { |
| 40 | + function doSomeWork() { |
| 41 | + $scope.$apply(function() { |
| 42 | + // do work here, and update the model |
| 43 | + }; |
| 44 | + } |
| 45 | + |
| 46 | + $element.on('click', doSomeWork); |
| 47 | + doSomeWork(); // << this will throw an exception because templates are compiled within $apply |
| 48 | + } |
| 49 | + } |
| 50 | +}); |
| 51 | + |
| 52 | +``` |
| 53 | + |
| 54 | +The fix for the example above looks like this: |
| 55 | +``` |
| 56 | +myApp.directive('myDirective', function() { |
| 57 | + return { |
| 58 | + link: function($scope, $element) { |
| 59 | + function doSomeWork() { |
| 60 | + // do work here, and update the model |
| 61 | + } |
| 62 | + |
| 63 | + $element.on('click', function() { |
| 64 | + $scope.$apply(doSomeWork); // <<< the $apply call was moved to the callsite that doesn't execute in $apply call already |
| 65 | + }); |
| 66 | + |
| 67 | + doSomeWork(); |
| 68 | + } |
| 69 | + } |
| 70 | +}); |
| 71 | + |
| 72 | +``` |
| 73 | + |
| 74 | +To learn more about Angular processing model please check out the {@link guide/concepts concepts doc} as well as the {@link api/ng.$rootScope.Scope api} doc. |
0 commit comments