fix($compile): Merge interpolated css class when replacing an element

Author: vojtajina

src/service/compiler.js

@@ -729,6 +729,9 @@ function $CompileProvider($provide) {
       // reapply the old attributes to the new element
       forEach(dst, function(value, key) {
         if (key.charAt(0) != '$') {
+          if (src[key]) {
+            value += (key === 'style' ? ';' : ' ') + src[key];
+          }
           dst.$set(key, value, srcAttr[key]);
         }
       });
@@ -873,6 +876,12 @@ function $CompileProvider($provide) {
         compile: function(element, attr) {
           if (interpolateFn) {
             return function(scope, element, attr) {
+              if (name === 'class') {
+                // we need to interpolate classes again, in the case the element was replaced
+                // and therefore the two class attrs got merged - we want to interpolate the result
+                interpolateFn = $interpolate(attr[name], true);
+              }
+
               // we define observers array only for interpolated attrs
               // and ignore observers for non interpolated attrs to save some memory
               attr.$observers[name] = [];

test/service/compilerSpec.js

@@ -391,7 +391,7 @@ describe('$compile', function() {
         }));
 
 
-        it('should merge attributes', inject(function($compile, $rootScope) {
+        it('should merge attributes including style attr', inject(function($compile, $rootScope) {
           element = $compile(
             '<div><div replace class="medium-log" style="height: 20px" ></div><div>')
             ($rootScope);
@@ -431,6 +431,39 @@ describe('$compile', function() {
           $rootScope.$digest();
           expect(element.text()).toEqual('Hello: 1; Hello: 2; ');
         }));
+
+
+        it('should merge interpolated css class', inject(function($compile, $rootScope) {
+          element = $compile('<div class="one {{cls}} three" replace></div>')($rootScope);
+
+          $rootScope.$apply(function() {
+            $rootScope.cls = 'two';
+          });
+
+          expect(element).toHaveClass('one');
+          expect(element).toHaveClass('two'); // interpolated
+          expect(element).toHaveClass('three');
+          expect(element).toHaveClass('log'); // merged from replace directive template
+        }));
+
+
+        it('should merge interpolated css class with ng-repeat',
+            inject(function($compile, $rootScope) {
+          element = $compile(
+              '<div>' +
+                '<div ng-repeat="i in [1]" class="one {{cls}} three" replace></div>' +
+              '</div>')($rootScope);
+
+          $rootScope.$apply(function() {
+            $rootScope.cls = 'two';
+          });
+
+          var child = element.find('div').eq(0);
+          expect(child).toHaveClass('one');
+          expect(child).toHaveClass('two'); // interpolated
+          expect(child).toHaveClass('three');
+          expect(child).toHaveClass('log'); // merged from replace directive template
+        }));
       });