scope is destroyed too early for ngView and ngInclude causing ngClass not to update

[matsko]

A popular animation trick is to perform a back and forward-style animation in using ngClass on a ngView or ngInclude element. This used to work with older versions of ngAnimate (pre 1.2) since ngAnimate didn't use CSS classes for animations.

Right now if you try and perform an animation that, when the route changes, updates ngClass and triggers the leave animation to be different, it won't reflect on the leaving element. This is because ngView and ngInclude both destroy the scope first and then trigger the animation. However, since an extra digest is required for a class to update via ngClass upon routeChange, the newly updated CSS classes won't show up in the element.

Therefore, we need to fix ngView and ngInclude to destroy the scope after a single digest loop via $$postDigest or something.

Dupes: #7515

[btford]

@matsko please triage your own issues. :smile:

[IgorMinar]

was this always an issue or is this a regression?

[mhevery]

Sounds like we need to delay removal until after digest.

[matsko]

The problem came from here: https://groups.google.com/forum/#!topic/angular/iKpRhrPr8ko

[matsko]

@IgorMinar always an issue once we started to rely on class="..." to detect animations.

[IgorMinar]

btw $destroy is now quite destructive. it even blows away $asyncEval and $$postDigest queues.

[IgorMinar]

+1 for what @btford said. please triage this issue so that others don't have to do it, you already understand the issue and can label it within a few seconds while others have to read and try to understand it.

[matsko]

@IgorMinar done.

[IgorMinar]

It sounds like we have three options:

1/ use postDigest to trigger a new apply and destroy the scopes there (it has to be an apply because destroy might change the model) - this could be an expensive. 2/ find a way to flush the class binding on the node being removed - this would be more efficient but kind of breaks many other guarantees of the digest cycle 3/ use evalAsync to destroy the scopes and remove nodes and hope that the class binding will get its proper value during the first iteration

2/ and 3/ have many issues so can we try 1/?

[btford]

meta: @matsko – when triaging, use exactly one of the severity: * and exactly one of the frequency: * labels. I fixed this one.

[gitnik]

Any update on this?

[halfong]

To me, solved by change the leaving ngView dom's class manually ( use zeptojs ) .

[kevineger]

Has this been resolved?

[gkalpak]

If people want a class-based, leave animation for ngView, why not use the "standard" ng-leave[-active] classes?