Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit e1254b2

Browse files
committed
fix($compile): correctly handle interpolated style in replace templates
A directive with a template with `replace: true` and an interpolated style at the root element should work correctly. Closes #4882.
1 parent fa82a31 commit e1254b2

File tree

2 files changed

+19
-1
lines changed

2 files changed

+19
-1
lines changed

src/ng/compile.js

+1
Original file line numberDiff line numberDiff line change
@@ -1588,6 +1588,7 @@ function $CompileProvider($provide) {
15881588
dst['class'] = (dst['class'] ? dst['class'] + ' ' : '') + value;
15891589
} else if (key == 'style') {
15901590
$element.attr('style', $element.attr('style') + ';' + value);
1591+
dst['style'] = (dst['style'] ? dst['style'] + ';' : '') + value;
15911592
// `dst` will never contain hasOwnProperty as DOM parser won't let it.
15921593
// You will get an "InvalidCharacterError: DOM Exception 5" error if you
15931594
// have an attribute like "has-own-property" or "data-has-own-property", etc.

test/ng/compileSpec.js

+18-1
Original file line numberDiff line numberDiff line change
@@ -504,6 +504,14 @@ describe('$compile', function() {
504504
expect(element).toBe(attr.$$element);
505505
}
506506
}));
507+
directive('replaceWithInterpolatedStyle', valueFn({
508+
replace: true,
509+
template: '<div style="width:{{1+1}}px">Replace with interpolated style!</div>',
510+
compile: function(element, attr) {
511+
attr.$set('compiled', 'COMPILED');
512+
expect(element).toBe(attr.$$element);
513+
}
514+
}));
507515
}));
508516

509517

@@ -581,13 +589,22 @@ describe('$compile', function() {
581589
}));
582590

583591

584-
it('should handle interpolated css from replacing directive', inject(
592+
it('should handle interpolated css class from replacing directive', inject(
585593
function($compile, $rootScope) {
586594
element = $compile('<div replace-with-interpolated-class></div>')($rootScope);
587595
$rootScope.$digest();
588596
expect(element).toHaveClass('class_2');
589597
}));
590598

599+
if (!msie || msie > 10) {
600+
// style interpolation not working on IE<11.
601+
it('should handle interpolated css style from replacing directive', inject(
602+
function($compile, $rootScope) {
603+
element = $compile('<div replace-with-interpolated-style></div>')($rootScope);
604+
$rootScope.$digest();
605+
expect(element.css('width')).toBe('2px');
606+
}));
607+
}
591608

592609
it('should merge interpolated css class', inject(function($compile, $rootScope) {
593610
element = $compile('<div class="one {{cls}} three" replace></div>')($rootScope);

0 commit comments

Comments
 (0)