diff --git a/src/ng1/viewDirective.ts b/src/ng1/viewDirective.ts index c57f6ce2a..e07166337 100644 --- a/src/ng1/viewDirective.ts +++ b/src/ng1/viewDirective.ts @@ -381,10 +381,12 @@ function $ViewDirectiveFill ( $compile, $controller, $transitions, $view, }; } +let hasComponentImpl = typeof angular.module('ui.router')['component'] === 'function'; + // TODO: move these callbacks to $view and/or `/hooks/components.ts` or something function registerControllerCallbacks($transitions: TransitionService, controllerInstance: Ng1Controller, $scope, cfg: Ng1ViewConfig) { // Call $onInit() ASAP - if (isFunction(controllerInstance.$onInit)) controllerInstance.$onInit(); + if (isFunction(controllerInstance.$onInit) && !(cfg.viewDecl.component && hasComponentImpl)) controllerInstance.$onInit(); var hookOptions: HookRegOptions = { bind: controllerInstance }; // Add component-level hook for onParamsChange diff --git a/test/viewDirectiveSpec.js b/test/viewDirectiveSpec.js index 524cf700a..caade8f78 100644 --- a/test/viewDirectiveSpec.js +++ b/test/viewDirectiveSpec.js @@ -778,7 +778,11 @@ describe('angular 1.5+ style .component()', function() { return { scope: { data: '=' }, templateUrl: '/comp_tpl.html', - controller: function() {}, + controller: function() { + this.$onInit = function () { + log += "onInit;" + } + }, bindToController: true, controllerAs: '$ctrl' } @@ -832,8 +836,7 @@ describe('angular 1.5+ style .component()', function() { $httpBackend.expectGET('/state_tpl.html').respond('xx'); $httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-'); - $state.transitionTo('cmp_tpl'); - $q.flush(); + $state.transitionTo('cmp_tpl'); $q.flush(); // Template has not yet been fetched var directiveEl = el[0].querySelector('div ui-view ng12-directive'); @@ -857,9 +860,7 @@ describe('angular 1.5+ style .component()', function() { $httpBackend.expectGET('/state_tpl.html').respond('xx'); $httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-'); - $state.transitionTo('cmp_tpl'); - $q.flush(); - $httpBackend.flush(); + $state.transitionTo('cmp_tpl'); $q.flush(); $httpBackend.flush(); directiveEl = el[0].querySelector('div ui-view ng13-directive'); expect(directiveEl).toBeDefined(); @@ -877,9 +878,7 @@ describe('angular 1.5+ style .component()', function() { $httpBackend.expectGET('/state_tpl.html').respond('xx'); $httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-'); - $state.transitionTo('cmp_tpl'); - $q.flush(); - $httpBackend.flush(); + $state.transitionTo('cmp_tpl'); $q.flush(); $httpBackend.flush(); directiveEl = el[0].querySelector('div ui-view ng-component'); expect(directiveEl).toBeDefined(); @@ -918,10 +917,8 @@ describe('angular 1.5+ style .component()', function() { var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q; - $state.transitionTo('route2cmp'); $httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-'); - $q.flush(); - $httpBackend.flush(); + $state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush(); directiveEl = el[0].querySelector('div ui-view ng12-directive'); expect(directiveEl).toBeDefined(); @@ -939,16 +936,29 @@ describe('angular 1.5+ style .component()', function() { var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q; - $state.transitionTo('route2cmp'); $httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-'); - $q.flush(); - $httpBackend.flush(); + $state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush(); directiveEl = el[0].querySelector('div ui-view ng13-directive'); expect(directiveEl).toBeDefined(); expect($state.current.name).toBe('route2cmp'); expect(el.text()).toBe('-DATA!-'); }); + + it('should call $onInit() once', function () { + $stateProvider.state('route2cmp', { + url: '/route2cmp', + component: 'ng13Directive', + resolve: { data: function() { return "DATA!"; } } + }); + + var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q; + + $httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-'); + $state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush(); + + expect(log).toBe('onInit;'); + }); } if (angular.version.minor >= 5) { @@ -961,16 +971,28 @@ describe('angular 1.5+ style .component()', function() { var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q; - $state.transitionTo('route2cmp'); $httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-'); - $q.flush(); - $httpBackend.flush(); + $state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush(); directiveEl = el[0].querySelector('div ui-view ng-component'); expect(directiveEl).toBeDefined(); expect($state.current.name).toBe('route2cmp'); expect(el.text()).toBe('-DATA!-'); }); + + it('should only call $onInit() once', function () { + $stateProvider.state('route2cmp', { + component: 'ngComponent', + resolve: { data: function() { return "DATA!"; } } + }); + + var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q; + + $httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-'); + $state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush(); + + expect(log).toBe('onInit;'); + }); } }); @@ -1007,10 +1029,9 @@ describe('angular 1.5+ style .component()', function() { $stateProvider.state('route2cmp', stateDef); var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q; - $state.transitionTo('route2cmp'); $httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-'); - $q.flush(); - $httpBackend.flush(); + $state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush(); + var header = el[0].querySelector('[ui-view=header]'); var content = el[0].querySelector('[ui-view=content]'); @@ -1030,10 +1051,9 @@ describe('angular 1.5+ style .component()', function() { $stateProvider.state('route2cmp', stateDef); var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q; - $state.transitionTo('route2cmp'); $httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-'); - $q.flush(); - $httpBackend.flush(); + $state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush(); + var header = el[0].querySelector('[ui-view=header]'); var content = el[0].querySelector('[ui-view=content]'); @@ -1054,10 +1074,8 @@ describe('angular 1.5+ style .component()', function() { var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q; - $state.transitionTo('route2cmp'); $httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-'); - $q.flush(); - $httpBackend.flush(); + $state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush(); directiveEl = el[0].querySelector('div ui-view ng12-directive'); expect(directiveEl).toBeDefined(); @@ -1079,10 +1097,8 @@ describe('angular 1.5+ style .component()', function() { var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q; - $state.transitionTo('route2cmp'); $httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}.{{ $ctrl.data2 }}-'); - $q.flush(); - $httpBackend.flush(); + $state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush(); directiveEl = el[0].querySelector('div ui-view ng-component'); expect(directiveEl).toBeDefined();