Question

总结 - 我有两个州。它们都有两个视图$(document).ready(function(e){ $('input#btn1').on('click', function(){ var changeThis = $('input#btn1').siblings('#yeezy').children('img').attr('src'); $("#homeimage").attr("img", changeThis); }) });和col1。在这两个州，col2都有col1，即templateUrl。

问题如何在不重新加载FirstTemplate.html的情况下从州one更改为州two。

我已经通过让状态FirstTemplate.html成为状态two的子项来完成此操作并且它正常工作，但我发现这是一个不完整的解决方案，因为父子结构不适合我在某些情况下。

one

Answer 1

我认为最好的解决方案可能是使用父抽象状态，就像这样：

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

并且，为了产生两个子视图，您必须在FirstTemplate上添加它：

<div ui-view></div>

我认为这可以解决您的问题。

PS：您还需要在州

上指定网址

Answer 2

您需要一个分层状态结构，但两个视图都具有相同的父级。

 $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

更改状态而不重新加载公共视图，角度ui-router。

2 个答案: