Skip to content

Commit c26a896

Browse files
committed
fix($compile): retain CSS classes added in clone fn on async directive
In synchronous directives (without a templateUrl), classes added to the node during the clone attach function persist in the post-link function. Before this patch, classes addedd to asynchronous templates during the clone attach function would not persist after the node is replaced with the template prior to linking. Fixes angular#5439
1 parent 3b1a4fe commit c26a896

File tree

2 files changed

+33
-0
lines changed

2 files changed

+33
-0
lines changed

src/ng/compile.js

+4
Original file line numberDiff line numberDiff line change
@@ -1707,9 +1707,13 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
17071707
linkNode = $compileNode[0];
17081708

17091709
if (beforeTemplateLinkNode !== beforeTemplateCompileNode) {
1710+
var oldClasses = beforeTemplateLinkNode.className;
17101711
// it was cloned therefore we have to clone as well.
17111712
linkNode = jqLiteClone(compileNode);
17121713
replaceWith(linkRootElement, jqLite(beforeTemplateLinkNode), linkNode);
1714+
1715+
// Copy in CSS classes from original node
1716+
safeAddClass(jqLite(linkNode), oldClasses);
17131717
}
17141718
if (afterTemplateNodeLinkFn.transclude) {
17151719
childBoundTranscludeFn = createBoundTranscludeFn(scope, afterTemplateNodeLinkFn.transclude);

test/ng/compileSpec.js

+29
Original file line numberDiff line numberDiff line change
@@ -1128,6 +1128,35 @@ describe('$compile', function() {
11281128
});
11291129

11301130

1131+
it('should copy classes from pre-template node into linked element', function() {
1132+
module(function() {
1133+
directive('outer', function($compile, $parse) {
1134+
return function(scope, element, attr) {
1135+
var template = $compile('<div inner></div>');
1136+
template(scope, function(node) {
1137+
element.append(node);
1138+
node.addClass('from-outer');
1139+
});
1140+
};
1141+
});
1142+
1143+
directive('inner', valueFn({
1144+
templateUrl: 'inner.html',
1145+
replace: true
1146+
}));
1147+
});
1148+
inject(function($compile, $templateCache, $rootScope) {
1149+
var child;
1150+
$templateCache.put('inner.html', '<p class="inner">Hello</p>');
1151+
element = $compile('<div outer></div>')($rootScope);
1152+
$rootScope.$digest();
1153+
child = element.children('p').eq(0);
1154+
expect(child).toHaveClass('from-outer');
1155+
expect(child).toHaveClass('inner');
1156+
});
1157+
});
1158+
1159+
11311160
describe('delay compile / linking functions until after template is resolved', function(){
11321161
var template;
11331162
beforeEach(module(function() {

0 commit comments

Comments
 (0)