CODEWITHSUNDEEP
angularjsangular-ui-router
Aditya Ponkshe
Aditya Ponkshe

Reputation: 3890

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

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'
      }
    }
  })

Upvotes: 0

Views: 72

Answers (2)

Michael
Michael

Reputation: 3104

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

Upvotes: 0

avcajaraville
avcajaraville

Reputation: 9084

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

Upvotes: 1

Related Questions