diff --git a/src/service/compiler.js b/src/service/compiler.js index 4ac01a7c558..85566f3c776 100644 --- a/src/service/compiler.js +++ b/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] = []; diff --git a/test/service/compilerSpec.js b/test/service/compilerSpec.js index f977294b025..a95e9eb34b7 100644 --- a/test/service/compilerSpec.js +++ b/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( '
') ($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('
')($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( + '
' + + '
' + + '
')($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 + })); });