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

ngClass broken in Angular 1.0.3? #1637

Closed
provegard opened this issue Dec 3, 2012 · 5 comments
Closed

ngClass broken in Angular 1.0.3? #1637

provegard opened this issue Dec 3, 2012 · 5 comments

Comments

@provegard
Copy link
Contributor

I noticed some odd ngClass behavior when upgrading from Angular 1.0.1 to 1.0.3. Going back to 1.0.2 fixed the problem. The following fiddle illustrates the problem:

http://jsfiddle.net/provegard/uwwgy/14/

Since a is false initially, the text should get the "foo" class and be red. The watch kicks in immediately and changes a to true, which should remove the "foo" class from the text and thus change it back to black. This is what happens in Angular 1.0.2, but not in 1.0.3.

(In my real app, I have two Twitter Bootstrap tabs that become initially active at the same time due to this bug.)

@jtymes
Copy link
Contributor

jtymes commented Dec 3, 2012

This is interesting. My suspicion is pointing to d859dce - as this commit is the most recent. Maybe @IgorMinar could weigh in on this?

This might also mean that some test cases are missing to catch a regression like this.

@beppler
Copy link

beppler commented Jan 2, 2013

I´m having this issue too.

I reverted the code to the old one and then it starts to work again.

@andreev-artem
Copy link

I'm also having this issue.
My use case:
1.0.1 (doesn't have issue): http://jsfiddle.net/3tgCA/4/
1.0.3 (has issue): http://jsfiddle.net/3tgCA/3/
v1.0.4-661a7287 (has issue): http://jsfiddle.net/3tgCA/2/

My workaround because I need some 1.0.3 features: http://jsfiddle.net/3tgCA/5/

@groner
Copy link
Contributor

groner commented Jan 24, 2013

The commit cebd015 adds a call to the ngClassWatchAction() after interpolation has touched the class attribute.

Because the initial interpolation event happens before the initial watch event, ngClassWatchAction() is called with a value that may change by the time the $scope.$watch($attrs.ngClass) takes effect. If that happens, the change goes undetected by the $watch() and ngClassWatchAction() doesn't know to remove the class that was added during the initial interpolation event.

Here is a simpler version of @jtymes fiddle:
http://jsfiddle.net/6DcCj/1/

With a debugger you can see that foo is true when the interpolation event fires, but is already false by the time the first watch event fires.

I think fixing this will require ng-class to track the classes it has added directly.

provegard added a commit to provegard/angular.js that referenced this issue Feb 15, 2013
ngClassWatchAction, when called as a $watch function, gets the wrong old
value after it has been invoked previously due to observation of the
interpolated class attribute. As a result it doesn't remove classes
properly. Keeping track of the old value manually seems to fix this.

Fixes angular#1637
IgorMinar pushed a commit that referenced this issue Feb 19, 2013
ngClassWatchAction, when called as a $watch function, gets the wrong old
value after it has been invoked previously due to observation of the
interpolated class attribute. As a result it doesn't remove classes
properly. Keeping track of the old value manually seems to fix this.

Closes #1637
@munir131
Copy link

munir131 commented Sep 2, 2014

I have same issue

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants