Animation logic triggering an unnecessary $rootScope.$digest if ng-if is present #15322

poshest · 2016-10-27T20:33:27Z

In this Plunker, there's a $scope.$apply() because of the ng-click as expected. But then, follows an $evalAsync which calls another, I would argue unnecessary $rootScope.$digest().

It seems to happen because of the presence of the ng-if in

<b ng-if="toggle">toggled</b>

And only happens when toggle evaluates to false, removing the element.

It doesn't happen if the ng-if is changed to ng-show. It seems to be caused by some core Angular animation functionality, involving functions like $$AnimateAsyncRunFactoryProvider, whose waitQueue appears to originate the $evalAsync. I'm not sure what fed the waitQueue in the first place. Although there is animation code involved, this problem occurs whether or not ng-animate is included.

It seems to have appeared in the 1.4.x series. No extra digest happens using v1.3.20.

This is causing many additional digest cycles in my app that I would love to not have.

The text was updated successfully, but these errors were encountered:

Narretz · 2016-10-28T10:31:15Z

Even if ngAnimate isn't included, Angular uses the same API for actions that may or may not have animations. And this API is async.
That doesn't mean the additional digest is necessary - this needs some further investigation

Narretz · 2016-10-28T11:42:38Z

So ngIf is using a then promise success handler to do some cleanup to the DOM once the element has been removed (this must be done after an animation runs, and the code must be async even if no animation exists). It's possible that we could use the done function for this, which works like then but doesn't use / create a promise. I'm not sure about the implications, though.

gkalpak · 2016-10-29T09:49:25Z

👍 on using .done instead. Since there is already a digest in progress and the extra digest is only for clearing some internal state (previousElements = null), there shouldn't be any implications (famous last words 😁).

…l directives ngIf, ngInclude, ngSwitch, and ngView now use the `done` callback functions on animation runners returned by leave/enter animations to do internal cleanup (and $anchorScroll for ngInclude and ngView). Previously, they were using promise callbacks (`then`), which caused an unnessecary digest. Background: In angular@bf0f550, animation promises where introduced instead of animation callbacks. These promises were however not tied to the digest cycle, so you had to manually call `$apply` inside them. This was changed in angular@c8700f0, so animation promise callbacks would always trigger a `$digest`. This meant that several built-in directives would now trigger additional digests on leave (ngIf, ngSwitch) or enter/leave (ngInclude, ngView). Note that this applies to all calls to $animate.enter/leave, even if no actual animations are running, because the animation runner code is in the core ng module. Fixes angular#15322

…ives ngIf, ngInclude, ngSwitch, and ngView now use the `done` callback functions on animation runners returned by leave/enter animations to do internal cleanup (and $anchorScroll for ngInclude and ngView). Previously, they were using promise callbacks (`then`), which caused an unnessecary digest. Background: In angular@bf0f550, animation promises where introduced instead of animation callbacks. These promises were however not tied to the digest cycle, so you had to manually call `$apply` inside them. This was changed in angular@c8700f0, so animation promise callbacks would always trigger a `$digest`. This meant that several built-in directives would now trigger additional digests on leave (ngIf, ngSwitch) or enter/leave (ngInclude, ngView). Note that this applies to all calls to $animate.enter/leave, even if no actual animations are running, because the animation runner code is in the core ng module. Fixes angular#15322

poshest · 2016-11-04T13:04:55Z

Wonderful stuff! Thank you @Narretz, @gkalpak :)

…ives ngIf, ngInclude, ngSwitch, and ngView now use the `done` callback functions on animation runners returned by leave/enter animations to do internal cleanup (and $anchorScroll for ngInclude and ngView). Previously, they were using promise callbacks (`then`), which caused an unnessecary digest. Background: In angular@bf0f550, animation promises where introduced instead of animation callbacks. These promises were however not tied to the digest cycle, so you had to manually call `$apply` inside them. This was changed in angular@c8700f0, so animation promise callbacks would always trigger a `$digest`. This meant that several built-in directives would now trigger additional digests on leave (ngIf, ngSwitch) or enter/leave (ngInclude, ngView). The `done` callback, which receives a single argument indicating success / failure was introduced to allow digest-less responses, but wasn't applied to these directives. Note that this applies to all calls to $animate.enter/leave, even if ngAnimate isn't included, and no actual animations are running, because the animation runner code is in the core ng module. Fixes angular#15322 Closes angular#15345

poshest · 2016-11-23T12:41:41Z

Thank you @Narretz :)

…ives ngIf, ngInclude, ngSwitch, and ngView now use the `done` callback functions on animation runners returned by leave/enter animations to do internal cleanup (and $anchorScroll for ngInclude and ngView). Previously, they were using promise callbacks (`then`), which caused an unnessecary digest. Background: In bf0f550, animation promises where introduced instead of animation callbacks. These promises were however not tied to the digest cycle, so you had to manually call `$apply` inside them. This was changed in c8700f0, so animation promise callbacks would always trigger a `$digest`. This meant that several built-in directives would now trigger additional digests on leave (ngIf, ngSwitch) or enter/leave (ngInclude, ngView). The `done` callback, which receives a single argument indicating success / failure was introduced to allow digest-less responses, but wasn't applied to these directives. Note that this applies to all calls to $animate.enter/leave, even if ngAnimate isn't included, and no actual animations are running, because the animation runner code is in the core ng module. Fixes #15322 Closes #15345

…ives ngIf, ngInclude, ngSwitch, and ngView now use the `done` callback functions on animation runners returned by leave/enter animations to do internal cleanup (and $anchorScroll for ngInclude and ngView). Previously, they were using promise callbacks (`then`), which caused an unnessecary digest. Background: In angular@bf0f550, animation promises where introduced instead of animation callbacks. These promises were however not tied to the digest cycle, so you had to manually call `$apply` inside them. This was changed in angular@c8700f0, so animation promise callbacks would always trigger a `$digest`. This meant that several built-in directives would now trigger additional digests on leave (ngIf, ngSwitch) or enter/leave (ngInclude, ngView). The `done` callback, which receives a single argument indicating success / failure was introduced to allow digest-less responses, but wasn't applied to these directives. Note that this applies to all calls to $animate.enter/leave, even if ngAnimate isn't included, and no actual animations are running, because the animation runner code is in the core ng module. Fixes angular#15322 Closes angular#15345

poshest changed the title ~~Animation logic triggering an extra (unnecessary?) $rootScope.$digest if ng-if is present~~ Animation logic triggering an unnecessary $rootScope.$digest if ng-if is present Oct 27, 2016

Narretz added this to the Purgatory milestone Oct 28, 2016

Narretz added needs: investigation component: ngAnimate component: misc core labels Oct 28, 2016

Narretz closed this as completed in f4fb6e0 Nov 23, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Animation logic triggering an unnecessary $rootScope.$digest if ng-if is present #15322

Animation logic triggering an unnecessary $rootScope.$digest if ng-if is present #15322

poshest commented Oct 27, 2016

Narretz commented Oct 28, 2016

Narretz commented Oct 28, 2016

gkalpak commented Oct 29, 2016

poshest commented Nov 4, 2016

poshest commented Nov 23, 2016

Animation logic triggering an unnecessary $rootScope.$digest if ng-if is present #15322

Animation logic triggering an unnecessary $rootScope.$digest if ng-if is present #15322

Comments

poshest commented Oct 27, 2016

Narretz commented Oct 28, 2016

Narretz commented Oct 28, 2016

gkalpak commented Oct 29, 2016

poshest commented Nov 4, 2016

poshest commented Nov 23, 2016