Skip to content

Commit 74d50f7

Browse files
committed
docs(minErr): add rootScope/inprog docs
1 parent 465a293 commit 74d50f7

File tree

1 file changed

+70
-0
lines changed

1 file changed

+70
-0
lines changed

docs/content/error/rootScope/inprog.ngdoc

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,73 @@
22
@name $rootScope:inprog
33
@fullName Action Already In Progress
44
@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

Comments
 (0)