Change states without reloading common view, angular ui-router.

Question

Summery - I have two states. Both of them have two views in them col1 and col2. In both states col1 has same templateUrl i.e. FirstTemplate.html.

Question - How can I change from state one to state two without reloading FirstTemplate.html.

I have done this by making state two a child of state one and it is working fine that way, but I find it to be an incomplete solution since parent-child structure is not suitable for me in some scenarios.

$stateProvider .state('one',{ views: { 'col1': { templateUrl: 'FirstTemplate.html' }, 'col2': { templateUrl: 'SecondTemplate.html' } }, .state('two',{ views: { 'col1': { templateUrl: 'FirstTemplate.html' }, 'col2': { templateUrl: 'ChangedTemplate.html' } } })

avcajaraville · Accepted Answer · 2015-05-19 08:20:44Z

I think the best solution might be to use a parent abstract state, like on this way:

 .state( 'parent', { abstract : true, templateUrl : 'FirstTemplate.html' }) .state( 'parent.one', { templateUrl : 'SecondTemplate.html', }) .state( 'parent.two', { templateUrl : 'ChangedTemplate.html', })

And, in order to yield both children views, you have to add this on FirstTemplate:

<div ui-view></div>

I think this will solve your problem.

PS: you need to specify also the url on the states

Michael · Accepted Answer · 2015-05-19 08:28:27Z

You'll need a hierarchical state structure, but both views have the same parent.

 $stateProvider .state('root', { abstract: true, url: '/root', views: { 'col1': { templateUrl: 'FirstTemplate.html', controller: function($scope) { $scope.lastUpdate = new Date(); } } } }).state('root.one', { url: '/one', views: { 'col2': { templateUrl: 'SecondTemplate.html', controller: function($scope) { $scope.lastUpdate = new Date(); } } } }) .state('root.two', { url: '/two', views: { 'col2': { templateUrl: 'ChangedTemplate.html', controller: function($scope) { $scope.lastUpdate = new Date(); } } } });

Plunker

Collectives™ on Stack Overflow

Change states without reloading common view, angular ui-router.

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related