fix(ng:class): preserve classes added post compilation

Di Peng · IgorMinar · commit 2428907259fa · 2011-07-13T16:42:38.000-07:00
- make sure ng:class preserve classes added after compilation Closes angular#355
diff --git a/src/directives.js b/src/directives.js
@@ -568,18 +568,25 @@ angularDirective("ng:submit", function(expression, element) {
   });
 });
 
-
 function ngClass(selector) {
   return function(expression, element){
-    var existing = element[0].className + ' ';
     return function(element){
-      this.$onEval(function(){
-        if (selector(this.$index)) {
-          var value = this.$eval(expression);
-          if (isArray(value)) value = value.join(' ');
-          element[0].className = trim(existing + value);
-        }
-      }, element);
+      if(selector(this.$index)) {
+        this.$watch(expression, function(newCls, oldCls) {
+          var cls = element.attr('class');
+          if (isArray(newCls)) newCls = newCls.join(' ');
+          if (isArray(oldCls)) oldCls = oldCls.join(' ');
+
+          // The time when newCls == oldCLs is when $watch just started
+          if (newCls == oldCls) {
+            cls += ' ' + newCls;
+          } else {
+            cls = cls.replace(' ' + oldCls, ' ' + newCls);
+          }
+
+          element.attr('class', cls);
+        });
+      }
     };
   };
 }
diff --git a/test/directivesSpec.js b/test/directivesSpec.js
@@ -177,7 +177,7 @@ describe("directive", function(){
 
 
   describe('ng:class', function() {
-    it('should add new and remove old classes dynamically', function() {
+    it('should change current class or remove old classes dynamically', function() {
       var scope = compile('<div class="existing" ng:class="dynClass"></div>');
       scope.dynClass = 'A';
       scope.$eval();
@@ -204,6 +204,45 @@ describe("directive", function(){
       expect(element.hasClass('A')).toBeTruthy();
       expect(element.hasClass('B')).toBeTruthy();
     });
+
+    it('should preserve class added post compilation', function() {
+      var scope = compile('<div class="existing" ng:class="dynClass"></div>');
+      scope.dynClass = 'A';
+      scope.$eval();
+      expect(element.hasClass('existing')).toBe(true);
+
+      // add extra class, change model and eval
+      element.addClass('newClass');
+      scope.dynClass = 'B';
+      scope.$eval();
+
+      expect(element.hasClass('existing')).toBe(true);
+      expect(element.hasClass('B')).toBe(true);
+      expect(element.hasClass('newClass')).toBe(true);
+    });
+
+    it('should preserve class added post compilation even without existing classes"', function() {
+      var scope = compile('<div ng:class="dynClass"></div>');
+      scope.dynClass = 'A';
+      scope.$eval();
+      expect(element.hasClass('A')).toBe(true);
+
+      // add extra class, change model and eval
+      element.addClass('newClass');
+      scope.dynClass = 'B';
+      scope.$eval();
+
+      expect(element.hasClass('B')).toBe(true);
+      expect(element.hasClass('newClass')).toBe(true);
+    });
+
+    it('should preserve right classes"', function() {
+      var scope = compile('<div class="ui-panel ui-selected" ng:class="dynCls"></div>');
+      scope.dynCls = 'panel';
+      scope.dynCls = 'foo';
+      scope.$eval();
+      expect(element.attr('class')).toBe('ui-panel ui-selected ng-directive foo');
+    });
   });
 
 
