更改状态而不重新加载公共视图，角度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.

总结 - 我有两个州。它们都有两个视图col1和col2。在两个状态中,col1具有相同的templateUrl,即FirstTemplate.html。

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

问题 - 如何在不重新加载FirstTemplate.html的情况下从状态1更改为状态2。

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

2 个解决方案

#1

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:

并且,为了生成两个子视图,您必须在FirstTemplate上添加:

<div ui-view></div>

I think this will solve your problem.

我想这会解决你的问题。

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

PS:您还需要在州上指定网址

#2

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

#1