fix(ngClassOdd/Even): add/remove the correct classes when expression/$index change simultaneously

Author: gkalpak

src/ng/directive/ngClass.js

@@ -15,14 +15,12 @@ function classDirective(name, selector) {
       link: function(scope, element, attr) {
         var oldVal;
 
-        scope.$watch(attr[name], ngClassWatchAction, true);
-
         if (name !== 'ngClass') {
           scope.$watch('$index', function($index, old$index) {
             /* eslint-disable no-bitwise */
             var mod = $index & 1;
             if (mod !== (old$index & 1)) {
-              var classes = arrayClasses(scope.$eval(attr[name]));
+              var classes = arrayClasses(oldVal);
               if (mod === selector) {
                 addClasses(classes);
               } else {
@@ -33,6 +31,8 @@ function classDirective(name, selector) {
           });
         }
 
+        scope.$watch(attr[name], ngClassWatchAction, true);
+
         function addClasses(classes) {
           var newClasses = digestClassCounts(classes, 1);
           attr.$addClass(newClasses);

test/ng/directive/ngClassSpec.js

@@ -461,6 +461,47 @@ describe('ngClass', function() {
     expect(e2.hasClass('odd')).toBeFalsy();
   }));
 
+
+  it('should add/remove the correct classes when the expression and `$index` change simultaneously',
+    inject(function($compile, $rootScope) {
+      element = $compile(
+          '<div>' +
+            '<div ng-class-odd="foo"></div>' +
+            '<div ng-class-even="foo"></div>' +
+          '</div>')($rootScope);
+      var odd = element.children().eq(0);
+      var even = element.children().eq(1);
+
+      $rootScope.$apply('$index = 0; foo = "class1"');
+
+      expect(odd).toHaveClass('class1');
+      expect(odd).not.toHaveClass('class2');
+      expect(even).not.toHaveClass('class1');
+      expect(even).not.toHaveClass('class2');
+
+      $rootScope.$apply('$index = 1; foo = "class2"');
+
+      expect(odd).not.toHaveClass('class1');
+      expect(odd).not.toHaveClass('class2');
+      expect(even).not.toHaveClass('class1');
+      expect(even).toHaveClass('class2');
+
+      $rootScope.$apply('foo = "class1"');
+
+      expect(odd).not.toHaveClass('class1');
+      expect(odd).not.toHaveClass('class2');
+      expect(even).toHaveClass('class1');
+      expect(even).not.toHaveClass('class2');
+
+      $rootScope.$apply('$index = 2');
+
+      expect(odd).toHaveClass('class1');
+      expect(odd).not.toHaveClass('class2');
+      expect(even).not.toHaveClass('class1');
+      expect(even).not.toHaveClass('class2');
+    })
+  );
+
   it('should support mixed array/object variable with a mutating object',
     inject(function($rootScope, $compile) {
       element = $compile('<div ng-class="classVar"></div>')($rootScope);