fix($compile): always instantiate controllers in parent->child order

Previously it was possible to get into a situation where child controller
was being instantiated before parent which resulted in an error.

Closes #2738

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);
+ });
  });
  }]
 });

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', '<div ng-transclude>parentTemplateText;</div>');
+ $templateCache.put('childDirective.html', '<span>childTemplateText;</span>');
+
+ element = $compile('<div parent-directive><div child-directive></div>childContentText;</div>')($rootScope);
+ $rootScope.$apply();
+ expect(log).toEqual('parentController; childController');
+ expect(element.text()).toBe('parentTemplateText;childTemplateText;childContentText;')
+ });
+ });
+
+
+ it('should instantiate controllers in the parent->child->baby order when nested transluction, templateUrl and ' +
+ 'replacement are in the mix', function() {
+ // similar to the test above, except that we have one more layer of nesting and nested transclusion
+
+ module(function() {
+ directive('parentDirective', function() {
+ return {
+ transclude: true,
+ replace: true,
+ templateUrl: 'parentDirective.html',
+ controller: function (log) { log('parentController'); }
+ };
+ });
+ directive('childDirective', function() {
+ return {
+ require: '^parentDirective',
+ transclude: true,
+ replace: true,
+ templateUrl: 'childDirective.html',
+ controller : function(log) { log('childController'); }
+ };
+ });
+ directive('babyDirective', function() {
+ return {
+ require: '^childDirective',
+ templateUrl: 'babyDirective.html',
+ controller : function(log) { log('babyController'); }
+ };
+ });
+ });
+
+ inject(function($templateCache, log, $compile, $rootScope) {
+ $templateCache.put('parentDirective.html', '<div ng-transclude>parentTemplateText;</div>');
+ $templateCache.put('childDirective.html', '<span ng-transclude>childTemplateText;</span>');
+ $templateCache.put('babyDirective.html', '<span>babyTemplateText;</span>');
+
+ element = $compile('<div parent-directive>' +
+ '<div child-directive>' +
+ 'childContentText;' +
+ '<div baby-directive>babyContent;</div>' +
+ '</div>' +
+ '</div>')($rootScope);
+ $rootScope.$apply();
+ expect(log).toEqual('parentController; childController; babyController');
+ expect(element.text()).toBe('parentTemplateText;childTemplateText;childContentText;babyTemplateText;')
+ });
+ });
  });