fix($compile): copy CSS classes from pre-template node to link node

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
caitp · Jan 3, 2014 · ed76b19 · ed76b19
1 parent 0559652
commit ed76b19
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/src/ng/compile.js b/src/ng/compile.js
@@ -1707,9 +1707,13 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
                 linkNode = $compileNode[0];
 
             if (beforeTemplateLinkNode !== beforeTemplateCompileNode) {
+              var oldClasses = beforeTemplateLinkNode.className;
               // it was cloned therefore we have to clone as well.
               linkNode = jqLiteClone(compileNode);
               replaceWith(linkRootElement, jqLite(beforeTemplateLinkNode), linkNode);
+
+              // Copy in CSS classes from original node
+              safeAddClass(jqLite(linkNode), oldClasses);
             }
             if (afterTemplateNodeLinkFn.transclude) {
               childBoundTranscludeFn = createBoundTranscludeFn(scope, afterTemplateNodeLinkFn.transclude);

diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
@@ -1128,6 +1128,35 @@ describe('$compile', function() {
         });
 
 
+        it('should copy classes from pre-template node into linked element', function() {
+          module(function() {
+            directive('outer', function($compile, $parse) {
+              return function(scope, element, attr) {
+                var template = $compile('<div inner></div>');
+                template(scope, function(node) {
+                  element.append(node);
+                  node.addClass('from-outer');
+                });
+              };
+            });
+
+            directive('inner', valueFn({
+              templateUrl: 'inner.html',
+              replace: true
+            }));
+          });
+          inject(function($compile, $templateCache, $rootScope) {
+            var child;
+            $templateCache.put('inner.html', '<p class="inner">Hello</p>');
+            element = $compile('<div outer></div>')($rootScope);
+            $rootScope.$digest();
+            child = element.children('p').eq(0);
+            expect(child).toHaveClass('from-outer');
+            expect(child).toHaveClass('inner');
+          });
+        });
+
+
         describe('delay compile / linking functions until after template is resolved', function(){
           var template;
           beforeEach(module(function() {