diff --git a/src/ng/directive/ngTransclude.js b/src/ng/directive/ngTransclude.js index c15b77cb4701..668f80335589 100644 --- a/src/ng/directive/ngTransclude.js +++ b/src/ng/directive/ngTransclude.js @@ -49,9 +49,14 @@ * */ var ngTranscludeDirective = ngDirective({ - controller: ['$transclude', '$element', function($transclude, $element) { - $transclude(function(clone) { - $element.append(clone); + controller: ['$transclude', '$element', '$scope', function($transclude, $element, $scope) { + // use evalAsync so that we don't process transclusion before directives on the parent element even when the + // transclusion replaces the current element. (we can't use priority here because that applies only to compile fns + // and not controllers + $scope.$evalAsync(function() { + $transclude(function(clone) { + $element.append(clone); + }); }); }] }); diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js index 97a58c10f7be..c782187878d6 100755 --- a/test/ng/compileSpec.js +++ b/test/ng/compileSpec.js @@ -2331,6 +2331,95 @@ describe('$compile', function() { expect(asyncCtrlSpy).toHaveBeenCalledOnce(); }); }); + + + + it('should instantiate controllers in the parent->child order when transluction, templateUrl and replacement ' + + 'are in the mix', function() { + // When a child controller is in the transclusion that replaces the parent element that has a directive with + // a controller, we should ensure that we first instantiate the parent and only then stuff that comes from the + // transclusion. + // + // The transclusion moves the child controller onto the same element as parent controller so both controllers are + // on the same level. + + module(function() { + directive('parentDirective', function() { + return { + transclude: true, + replace: true, + templateUrl: 'parentDirective.html', + controller: function (log) { log('parentController'); } + }; + }); + directive('childDirective', function() { + return { + require: '^parentDirective', + templateUrl: 'childDirective.html', + controller : function(log) { log('childController'); } + }; + }); + }); + + inject(function($templateCache, log, $compile, $rootScope) { + $templateCache.put('parentDirective.html', '