Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

ngShow gives inconsistent results with ngAnimate #11717

Closed
dubejf opened this issue Apr 24, 2015 · 5 comments
Closed

ngShow gives inconsistent results with ngAnimate #11717

dubejf opened this issue Apr 24, 2015 · 5 comments

Comments

@dubejf
Copy link

dubejf commented Apr 24, 2015

ng-show gives inconsistent results when the watched valued is changed multiple time in the same digest cycle and ngAnimate is included.

Here is a simple reproduction with 1.4.0-rc.0: http://jsfiddle.net/dubejf/xz6ppj9v/2/

  • The controller has a flag, vm.showIt.
  • This flag controls a red div using a ng-show directive, with ng-show="vm.showIt".
  • Clicking on the button toggles the flag, twice. First to set it to true, then to set it to false. The value are changed using a $timeout, in the hope that the ng-show watch will update twice in the same digest.

Expected behavior: Click on 'Click me'. At the end of the digest, vm.showIt should always be false. The red div should always be invisible.

Actual behavior: vm.showIt is always false at the end of the cycle (good). The red div is sometime visible, sometime invisible (bad).

The behavior is easier to observe in Firefox r37, where the fiddle gives the wrong results half the time. The bad behavior can also be observed in Chrome r42, with less consistency - I haven't been able to figure the pattern, you may need a few dozen push of the button to make it fail.

When the test fails (red div visible), the class 'ng-hide' is missing on the div. The class should be set, because the condition for ng-show is false.

The root of the problem appears to be the handling of classes inside the $animate service, specifically when successive calls to removeClass \ addClass are made.

The problem only occurs when the ngAnimate module is included. Tested with 1.4.0-rc.0 and 1.4.0-build.3988.

@dubejf
Copy link
Author

dubejf commented Apr 24, 2015

You can see that commenting 'ngAnimate' in the fiddle resolves the issue. The bug is easier to demonstrate with Firefox.

@Narretz
Copy link
Contributor

Narretz commented Apr 28, 2015

Did that happen before (in 1.3.x)?

@Narretz Narretz added this to the 1.4.x - jaracimrman-existence milestone Apr 28, 2015
@dubejf
Copy link
Author

dubejf commented Apr 28, 2015

Still a problem in the latest rc 1.4.0-rc.1 http://jsfiddle.net/dubejf/xz6ppj9v/3/
I'm not able to reproduce it in 1.3.15 http://jsfiddle.net/dubejf/xz6ppj9v/4/

@Narretz Narretz modified the milestones: 1.4.0-rc.2, 1.4.x - jaracimrman-existence Apr 28, 2015
matsko added a commit to matsko/angular.js that referenced this issue Apr 29, 2015
…class is added/removed when removed/added

This patch ensures that if the same CSS class is added/removed within a
follow-up digest then the previous class-based animation is cancelled
beforehand.

Closes angular#11717
@matsko
Copy link
Contributor

matsko commented Apr 29, 2015

This PR should fix it: #11755

@dubejf
Copy link
Author

dubejf commented Apr 29, 2015

Great! I ported the PR to my local copy. It does fix the issue.

petebacondarwin pushed a commit to petebacondarwin/angular.js that referenced this issue May 22, 2015
…class is added/removed when removed/added

This patch ensures that if the same CSS class is added/removed within a
follow-up digest then the previous class-based animation is cancelled
beforehand.

Closes angular#11717
petebacondarwin added a commit to petebacondarwin/angular.js that referenced this issue May 22, 2015
…class is added/removed when removed/added

This patch ensures that if the same CSS class is added/removed within a
follow-up digest then the previous class-based animation is cancelled
beforehand.

Closes angular#11717
matsko added a commit to matsko/angular.js that referenced this issue May 26, 2015
…class is added/removed when removed/added

This patch ensures that if the same CSS class is added/removed within a
follow-up digest then the previous class-based animation is cancelled
beforehand.

Closes angular#11717
matsko added a commit to matsko/angular.js that referenced this issue May 26, 2015
…class is added/removed when removed/added

This patch ensures that if the same CSS class is added/removed within a
follow-up digest then the previous class-based animation is cancelled
beforehand.

Closes angular#11717
@matsko matsko closed this as completed in db246eb May 26, 2015
netman92 pushed a commit to netman92/angular.js that referenced this issue Aug 8, 2015
…class is added/removed when removed/added

This patch ensures that if the same CSS class is added/removed within a
follow-up digest then the previous class-based animation is cancelled
beforehand.

Closes angular#11717
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.