fix(ngClass): keep track of old ngClass value manually

provegard · IgorMinar · commit 5f5d4feadbfa · 2013-02-18T20:25:43.000-08:00
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 angular#1637
diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
@@ -3,6 +3,7 @@
 function classDirective(name, selector) {
   name = 'ngClass' + name;
   return ngDirective(function(scope, element, attr) {
+    var oldVal = undefined;
 
     scope.$watch(attr[name], ngClassWatchAction, true);
 
@@ -26,13 +27,14 @@ function classDirective(name, selector) {
     }
 
 
-    function ngClassWatchAction(newVal, oldVal) {
+    function ngClassWatchAction(newVal) {
       if (selector === true || scope.$index % 2 === selector) {
         if (oldVal && (newVal !== oldVal)) {
           removeClass(oldVal);
         }
         addClass(newVal);
       }
+      oldVal = newVal;
     }
 
 
diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
@@ -236,6 +236,17 @@ describe('ngClass', function() {
   }));
 
 
+  it('should not mess up class value due to observing an interpolated class attribute', inject(function($rootScope, $compile) {
+    $rootScope.foo = true;
+    $rootScope.$watch("anything", function() {
+      $rootScope.foo = false;
+    });
+    element = $compile('<div ng-class="{foo:foo}"></div>')($rootScope);
+    $rootScope.$digest();
+    expect(element.hasClass('foo')).toBe(false);
+  }));
+
+
   it('should update ngClassOdd/Even when model is changed by filtering', inject(function($rootScope, $compile) {
     element = $compile('<ul>' +
       '<li ng-repeat="i in items" ' +

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`function classDirective(name, selector) {`
`4`	`4`	`name = 'ngClass' + name;`
`5`	`5`	`return ngDirective(function(scope, element, attr) {`
	`6`	`+ var oldVal = undefined;`
`6`	`7`
`7`	`8`	`scope.$watch(attr[name], ngClassWatchAction, true);`
`8`	`9`
`@@ -26,13 +27,14 @@ function classDirective(name, selector) {`
`26`	`27`	`}`
`27`	`28`
`28`	`29`
`29`		`- function ngClassWatchAction(newVal, oldVal) {`
	`30`	`+ function ngClassWatchAction(newVal) {`
`30`	`31`	`if (selector === true \|\| scope.$index % 2 === selector) {`
`31`	`32`	`if (oldVal && (newVal !== oldVal)) {`
`32`	`33`	`removeClass(oldVal);`
`33`	`34`	`}`
`34`	`35`	`addClass(newVal);`
`35`	`36`	`}`
	`37`	`+ oldVal = newVal;`
`36`	`38`	`}`
`37`	`39`
`38`	`40`