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

IgorMinar · IgorMinar · commit 3ea2416f8083 · 2011-07-19T16:07:25.000-07:00
This reverts commit 2428907. We decided to revert this because it is not bullet proof. The issue is that we can't reliably have both angular and non-angular code in charge of the DOM. We could work around some issues here and there, but we can't do it reliably, so it's better not to support DOM manipulation that happens outside of angular. There is a good chance that once we integrate with MDVs our possition will change, but until then our position is that only angular or angular widgets/directives can change change DOM that was compiled.
diff --git a/src/directives.js b/src/directives.js
@@ -565,25 +565,18 @@ angularDirective("ng:submit", function(expression, element) {
   });
 });
 
+
 function ngClass(selector) {
   return function(expression, element){
+    var existing = element[0].className + ' ';
     return function(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);
-        });
-      }
+      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);
     };
   };
 }
diff --git a/test/directivesSpec.js b/test/directivesSpec.js
@@ -179,7 +179,7 @@ describe("directive", function(){
 
 
   describe('ng:class', function() {
-    it('should change current class or remove old classes dynamically', function() {
+    it('should add new and remove old classes dynamically', function() {
       var scope = compile('<div class="existing" ng:class="dynClass"></div>');
       scope.dynClass = 'A';
       scope.$eval();
@@ -206,45 +206,6 @@ 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');
-    });
   });
 
 
