Skip to content

Commit d42b617

Browse files
christopherthielenchristopherthielen
committed
fix(ViewHooks): Avoid calling $onInit if angular 1.5 will call it for us
closes #2660
1 parent 1d58a02 commit d42b617

File tree

2 files changed

+49
-31
lines changed

2 files changed

+49
-31
lines changed

‎src/ng1/viewDirective.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -381,10 +381,12 @@ function $ViewDirectiveFill ( $compile, $controller, $transitions, $view,
381381
};
382382
}
383383

384+
let hasComponentImpl = typeof angular.module('ui.router')['component'] === 'function';
385+
384386
// TODO: move these callbacks to $view and/or `/hooks/components.ts` or something
385387
function registerControllerCallbacks($transitions: TransitionService, controllerInstance: Ng1Controller, $scope, cfg: Ng1ViewConfig) {
386388
// Call $onInit() ASAP
387-
if (isFunction(controllerInstance.$onInit)) controllerInstance.$onInit();
389+
if (isFunction(controllerInstance.$onInit) && !(cfg.viewDecl.component && hasComponentImpl)) controllerInstance.$onInit();
388390

389391
var hookOptions: HookRegOptions = { bind: controllerInstance };
390392
// Add component-level hook for onParamsChange

‎test/viewDirectiveSpec.js‎

Lines changed: 46 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -778,7 +778,11 @@ describe('angular 1.5+ style .component()', function() {
778778
return {
779779
scope: { data: '=' },
780780
templateUrl: '/comp_tpl.html',
781-
controller: function() {},
781+
controller: function() {
782+
this.$onInit = function () {
783+
log += "onInit;"
784+
}
785+
},
782786
bindToController: true,
783787
controllerAs: '$ctrl'
784788
}
@@ -832,8 +836,7 @@ describe('angular 1.5+ style .component()', function() {
832836
$httpBackend.expectGET('/state_tpl.html').respond('x<ng12-directive data="$resolve.data"></ng12-directive>x');
833837
$httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-');
834838

835-
$state.transitionTo('cmp_tpl');
836-
$q.flush();
839+
$state.transitionTo('cmp_tpl'); $q.flush();
837840

838841
// Template has not yet been fetched
839842
var directiveEl = el[0].querySelector('div ui-view ng12-directive');
@@ -857,9 +860,7 @@ describe('angular 1.5+ style .component()', function() {
857860
$httpBackend.expectGET('/state_tpl.html').respond('x<ng13-directive data="$resolve.data"></ng13-directive>x');
858861
$httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-');
859862

860-
$state.transitionTo('cmp_tpl');
861-
$q.flush();
862-
$httpBackend.flush();
863+
$state.transitionTo('cmp_tpl'); $q.flush(); $httpBackend.flush();
863864

864865
directiveEl = el[0].querySelector('div ui-view ng13-directive');
865866
expect(directiveEl).toBeDefined();
@@ -877,9 +878,7 @@ describe('angular 1.5+ style .component()', function() {
877878
$httpBackend.expectGET('/state_tpl.html').respond('x<ng-component data="$resolve.data"></ng-component>x');
878879
$httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-');
879880

880-
$state.transitionTo('cmp_tpl');
881-
$q.flush();
882-
$httpBackend.flush();
881+
$state.transitionTo('cmp_tpl'); $q.flush(); $httpBackend.flush();
883882

884883
directiveEl = el[0].querySelector('div ui-view ng-component');
885884
expect(directiveEl).toBeDefined();
@@ -918,10 +917,8 @@ describe('angular 1.5+ style .component()', function() {
918917

919918
var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q;
920919

921-
$state.transitionTo('route2cmp');
922920
$httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-');
923-
$q.flush();
924-
$httpBackend.flush();
921+
$state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush();
925922

926923
directiveEl = el[0].querySelector('div ui-view ng12-directive');
927924
expect(directiveEl).toBeDefined();
@@ -939,16 +936,29 @@ describe('angular 1.5+ style .component()', function() {
939936

940937
var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q;
941938

942-
$state.transitionTo('route2cmp');
943939
$httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-');
944-
$q.flush();
945-
$httpBackend.flush();
940+
$state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush();
946941

947942
directiveEl = el[0].querySelector('div ui-view ng13-directive');
948943
expect(directiveEl).toBeDefined();
949944
expect($state.current.name).toBe('route2cmp');
950945
expect(el.text()).toBe('-DATA!-');
951946
});
947+
948+
it('should call $onInit() once', function () {
949+
$stateProvider.state('route2cmp', {
950+
url: '/route2cmp',
951+
component: 'ng13Directive',
952+
resolve: { data: function() { return "DATA!"; } }
953+
});
954+
955+
var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q;
956+
957+
$httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-');
958+
$state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush();
959+
960+
expect(log).toBe('onInit;');
961+
});
952962
}
953963

954964
if (angular.version.minor >= 5) {
@@ -961,16 +971,28 @@ describe('angular 1.5+ style .component()', function() {
961971

962972
var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q;
963973

964-
$state.transitionTo('route2cmp');
965974
$httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-');
966-
$q.flush();
967-
$httpBackend.flush();
975+
$state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush();
968976

969977
directiveEl = el[0].querySelector('div ui-view ng-component');
970978
expect(directiveEl).toBeDefined();
971979
expect($state.current.name).toBe('route2cmp');
972980
expect(el.text()).toBe('-DATA!-');
973981
});
982+
983+
it('should only call $onInit() once', function () {
984+
$stateProvider.state('route2cmp', {
985+
component: 'ngComponent',
986+
resolve: { data: function() { return "DATA!"; } }
987+
});
988+
989+
var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q;
990+
991+
$httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-');
992+
$state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush();
993+
994+
expect(log).toBe('onInit;');
995+
});
974996
}
975997
});
976998

@@ -1007,10 +1029,9 @@ describe('angular 1.5+ style .component()', function() {
10071029
$stateProvider.state('route2cmp', stateDef);
10081030
var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q;
10091031

1010-
$state.transitionTo('route2cmp');
10111032
$httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-');
1012-
$q.flush();
1013-
$httpBackend.flush();
1033+
$state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush();
1034+
10141035
var header = el[0].querySelector('[ui-view=header]');
10151036
var content = el[0].querySelector('[ui-view=content]');
10161037

@@ -1030,10 +1051,9 @@ describe('angular 1.5+ style .component()', function() {
10301051
$stateProvider.state('route2cmp', stateDef);
10311052
var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q;
10321053

1033-
$state.transitionTo('route2cmp');
10341054
$httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-');
1035-
$q.flush();
1036-
$httpBackend.flush();
1055+
$state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush();
1056+
10371057
var header = el[0].querySelector('[ui-view=header]');
10381058
var content = el[0].querySelector('[ui-view=content]');
10391059

@@ -1054,10 +1074,8 @@ describe('angular 1.5+ style .component()', function() {
10541074

10551075
var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q;
10561076

1057-
$state.transitionTo('route2cmp');
10581077
$httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}-');
1059-
$q.flush();
1060-
$httpBackend.flush();
1078+
$state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush();
10611079

10621080
directiveEl = el[0].querySelector('div ui-view ng12-directive');
10631081
expect(directiveEl).toBeDefined();
@@ -1079,10 +1097,8 @@ describe('angular 1.5+ style .component()', function() {
10791097

10801098
var $state = svcs.$state, $httpBackend = svcs.$httpBackend, $q = svcs.$q;
10811099

1082-
$state.transitionTo('route2cmp');
10831100
$httpBackend.expectGET('/comp_tpl.html').respond('-{{ $ctrl.data }}.{{ $ctrl.data2 }}-');
1084-
$q.flush();
1085-
$httpBackend.flush();
1101+
$state.transitionTo('route2cmp'); $q.flush(); $httpBackend.flush();
10861102

10871103
directiveEl = el[0].querySelector('div ui-view ng-component');
10881104
expect(directiveEl).toBeDefined();

0 commit comments

Comments
 (0)