fix($compile): link async+replace element transclusion directives wit…

…h comment element Previously, element transclusion directives would not receive a comment node in their link functions when they were the root of an asynchronous replace template. This would cause duplicate elements to appear in an ng-if expression within ng-repeat. Closes angular#6006
caitp · Feb 3, 2014 · daa4059 · daa4059
1 parent 19ba651
commit daa4059
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 5 deletions.
diff --git a/src/ng/compile.js b/src/ng/compile.js
@@ -1662,7 +1662,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
 
       $http.get($sce.getTrustedResourceUrl(templateUrl), {cache: $templateCache}).
         success(function(content) {
-          var compileNode, tempTemplateAttrs, $template, childBoundTranscludeFn;
+          var compileNode, tempTemplateAttrs, $template, childBoundTranscludeFn, replaceTransclude;
 
           content = denormalizeTemplate(content);
 
@@ -1685,6 +1685,12 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
             }
             directives = templateDirectives.concat(directives);
             mergeTemplateAttributes(tAttrs, tempTemplateAttrs);
+            for (var i=0, ii=directives.length; i<ii; ++i) {
+              if (directives[i].transclude === 'element') {
+                replaceTransclude = true;
+                break;
+              }
+            }
           } else {
             compileNode = beforeTemplateCompileNode;
             $compileNode.html(content);
@@ -1712,12 +1718,18 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
 
             if (beforeTemplateLinkNode !== beforeTemplateCompileNode) {
               var oldClasses = beforeTemplateLinkNode.className;
-              // it was cloned therefore we have to clone as well.
-              linkNode = jqLiteClone(compileNode);
+
+              if (!replaceTransclude) {
+                // 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 (isDefined(oldClasses)) {
+                // 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
@@ -3972,6 +3972,54 @@ describe('$compile', function() {
         });
       });
 
+      // issue #6006
+      it('should link directive with $element as a comment node', function() {
+        module(function($provide) {
+          directive('innerAgain', function(log) {
+            return {
+              transclude: 'element',
+              link: function(scope, element, attr, controllers, transclude) {
+                log('innerAgain:'+lowercase(nodeName_(element)));
+                transclude(scope, function(clone) {
+                  element.parent().append(clone);
+                });
+              }
+            };
+          });
+          directive('inner', function(log) {
+            return {
+              replace: true,
+              templateUrl: 'inner.html',
+              link: function(scope, element) {
+                log('inner:'+lowercase(nodeName_(element)));
+              }
+            };
+          });
+          directive('outer', function(log) {
+            return {
+              transclude: 'element',
+              link: function(scope, element, attrs, controllers, transclude) {
+                log('outer:'+lowercase(nodeName_(element)));
+                transclude(scope, function(clone) {
+                  element.parent().append(clone);
+                });
+              }
+            };
+          });
+        });
+        inject(function(log, $compile, $rootScope, $templateCache) {
+          $templateCache.put('inner.html', '<div inner-again><p>Content</p></div>');
+          element = $compile('<div><div outer><div inner></div></div></div>')($rootScope);
+          $rootScope.$digest();
+          var child = element.children();
+
+          expect(log.toArray()).toEqual(["outer:#comment", "innerAgain:#comment", "inner:#comment"]);
+          expect(child.length).toBe(1);
+          expect(child.contents().length).toBe(2);
+          expect(lowercase(nodeName_(child.contents().eq(0)))).toBe('#comment');
+          expect(lowercase(nodeName_(child.contents().eq(1)))).toBe('div');
+        });
+      });
     });
 
     it('should safely create transclude comment node and not break with "-->"',