fix(ngClass): ensure that ngClass only adds/removes the changed classes

ngClass works by removing all the former classes and then adding all the
new classes to the element during each watch change operation. This may
cause transition animations to never render. The ngClass directive will
now only add and remove the classes that change during each watch operation.

Closes #4960
Closes #4944

1 files changed, 43 insertions, 0 deletions

diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index ab996e4d..62733c85 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -411,4 +411,47 @@ describe('ngClass animations', function() {
       expect(enterComplete).toBe(true);
     });
   });
+
+  it("should not remove classes if they're going to be added back right after", function() {
+    module('mock.animate');
+
+    inject(function($rootScope, $compile, $animate) {
+      var className;
+
+      $rootScope.one = true;
+      $rootScope.two = true;
+      $rootScope.three = true;
+
+      var element = angular.element('<div ng-class="{one:one, two:two, three:three}"></div>');
+      $compile(element)($rootScope);
+      $rootScope.$digest();
+
+      //this fires twice due to the class observer firing
+      className = $animate.flushNext('addClass').params[1];
+      className = $animate.flushNext('addClass').params[1];
+      expect(className).toBe('one two three');
+
+      expect($animate.queue.length).toBe(0);
+
+      $rootScope.three = false;
+      $rootScope.$digest();
+
+      className = $animate.flushNext('removeClass').params[1];
+      expect(className).toBe('three');
+
+      expect($animate.queue.length).toBe(0);
+
+      $rootScope.two = false;
+      $rootScope.three = true;
+      $rootScope.$digest();
+
+      className = $animate.flushNext('removeClass').params[1];
+      expect(className).toBe('two');
+
+      className = $animate.flushNext('addClass').params[1];
+      expect(className).toBe('three');
+
+      expect($animate.queue.length).toBe(0);
+    });
+  });
 });