Transclude issue

src/ng/compile.js

@@ -937,7 +937,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
       return linkFnFound ? compositeLinkFn : null;
 
       function compositeLinkFn(scope, nodeList, $rootElement, boundTranscludeFn) {
-        var nodeLinkFn, childLinkFn, node, $node, childScope, childTranscludeFn, i, ii, n;
+        var nodeLinkFn, childLinkFn, node, $node, childScope, i, ii, n, childBoundTranscludeFn;
 
         // copy nodeList so that linking doesn't break due to live list updates.
         var nodeListLength = nodeList.length,
@@ -959,14 +959,19 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
             } else {
               childScope = scope;
             }
-            childTranscludeFn = nodeLinkFn.transclude;
-            if (childTranscludeFn || (!boundTranscludeFn && transcludeFn)) {
-              nodeLinkFn(childLinkFn, childScope, node, $rootElement,
-                createBoundTranscludeFn(scope, childTranscludeFn || transcludeFn)
-              );
+
+            // We need to create a new boundTranscludeFn if
+            //  - a directive on this element wants to transclude
+            //  or
+            //  - there is no boundTranscludeFn already and a transcludeFn was passed in
+            if ( nodeLinkFn.transcludeOnThisElement || (!boundTranscludeFn && transcludeFn) ) {
+              childBoundTranscludeFn = createBoundTranscludeFn(scope, nodeLinkFn.transclude || transcludeFn);
             } else {
-              nodeLinkFn(childLinkFn, childScope, node, $rootElement, boundTranscludeFn);
+              childBoundTranscludeFn = boundTranscludeFn;
             }
+
+            nodeLinkFn(childLinkFn, childScope, node, $rootElement, childBoundTranscludeFn);
+
           } else if (childLinkFn) {
             childLinkFn(scope, node.childNodes, undefined, boundTranscludeFn);
           }
@@ -1342,7 +1347,9 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
       }
 
       nodeLinkFn.scope = newScopeDirective && newScopeDirective.scope === true;
-      nodeLinkFn.transclude = hasTranscludeDirective && childTranscludeFn;
+      nodeLinkFn.transcludeOnThisElement = hasTranscludeDirective;
+      nodeLinkFn.transclude = childTranscludeFn;
+
       previousCompileContext.hasElementTranscludeDirective = hasElementTranscludeDirective;
 
       // might be normal or delayed nodeLinkFn depending on if templateUrl is present

test/ng/compileSpec.js

@@ -1497,6 +1497,114 @@ describe('$compile', function() {
         ));
 
 
+        describe('nested transcludes', function() {
+
+          beforeEach(module(function($compileProvider) {
+
+            $compileProvider.directive('noop', valueFn({}));
+
+            $compileProvider.directive('sync', valueFn({
+              template: '<div ng-transclude></div>',
+              transclude: true
+            }));
+
+            $compileProvider.directive('async', valueFn({
+              templateUrl: 'async',
+              transclude: true
+            }));
+
+            $compileProvider.directive('syncSync', valueFn({
+              template: '<div noop><div sync><div ng-transclude></div></div></div>',
+              transclude: true
+            }));
+
+            $compileProvider.directive('syncAsync', valueFn({
+              template: '<div noop><div async><div ng-transclude></div></div></div>',
+              transclude: true
+            }));
+
+            $compileProvider.directive('asyncSync', valueFn({
+              templateUrl: 'asyncSync',
+              transclude: true
+            }));
+
+            $compileProvider.directive('asyncAsync', valueFn({
+              templateUrl: 'asyncAsync',
+              transclude: true
+            }));
+
+          }));
+
+          beforeEach(inject(function($templateCache) {
+            $templateCache.put('async', '<div ng-transclude></div>');
+            $templateCache.put('asyncSync', '<div noop><div sync><div ng-transclude></div></div></div>');
+            $templateCache.put('asyncAsync', '<div noop><div async><div ng-transclude></div></div></div>');
+          }));
+
+
+          it('should allow nested transclude directives with sync template containing sync template', inject(function($compile, $rootScope) {
+            element = $compile('<div sync-sync>transcluded content</div>')($rootScope);
+            $rootScope.$digest();
+            expect(element.text()).toEqual('transcluded content');
+          }));
+
+          it('should allow nested transclude directives with sync template containing async template', inject(function($compile, $rootScope) {
+            element = $compile('<div sync-async>transcluded content</div>')($rootScope);
+            $rootScope.$digest();
+            expect(element.text()).toEqual('transcluded content');
+          }));
+
+          it('should allow nested transclude directives with async template containing sync template', inject(function($compile, $rootScope) {
+            element = $compile('<div async-sync>transcluded content</div>')($rootScope);
+            $rootScope.$digest();
+            expect(element.text()).toEqual('transcluded content');
+          }));
+
+          it('should allow nested transclude directives with async template containing asynch template', inject(function($compile, $rootScope) {
+            element = $compile('<div async-async>transcluded content</div>')($rootScope);
+            $rootScope.$digest();
+            expect(element.text()).toEqual('transcluded content');
+          }));
+        });
+
+        describe('transclude and children', function() {
+          beforeEach(module(function($compileProvider) {
+
+            $compileProvider.directive('myExample', valueFn({
+              scope: {},
+              link: function link(scope, element, attrs) {
+                var foo = element[0].querySelector('.foo');
+                scope.children = angular.element(foo).children().length;
+              },
+              template: '<div>' +
+                '<div>myExample {{children}}!</div>' +
+                '<div ng-if="children">has children</div>' +
+                '<div class="foo" ng-transclude></div>' +
+              '</div>',
+              transclude: true
+
+            }));
+
+          }));
+
+          it("should not pick up too many children when transcluding", inject(function($compile, $rootScope) {
+            var element = $compile('<div my-example></div>')($rootScope);
+            $rootScope.$digest();
+            $rootScope.$digest();
+            expect(element.text()).toEqual('myExample 0!');
+            dealoc(element);
+
+            element = $compile('<div my-example><p></p></div>')($rootScope);
+            $rootScope.$digest();
+            $rootScope.$digest();
+            expect(element.text()).toEqual('myExample 1!has children');
+            dealoc(element);
+          }));
+
+        });
+
+
+
         it("should fail if replacing and template doesn't have a single root element", function() {
           module(function($exceptionHandlerProvider) {
             $exceptionHandlerProvider.mode('log');