Javascript 如何使用angular ui.router转换到多个视图

我在ui.router上遇到了一些问题。 我定义了我认为可以在三种状态之间切换的状态

$stateProvider
        .state('rackOrShelf', {
            url: '/information',
            templateUrl: 'Scripts/html/rackOrShelfPartial.html'
        }).state('door', {
            url: '/information',
            templateUrl: 'Scripts/html/doorPartial.html'
        }).state('frame', {
            url: '/information',
            templateUrl: 'Scripts/html/framePartial.html'
        });

我有一个html页面，它定义了一个标题，在顶部显示常见的内容。在div的下面，我有一个ui视图占位符

html页面定义了一个ng控制器，它执行一些工作并返回一个json模型，其中一个参数是

model.Transiton = 'frame';

我用它来称呼这个。 $state.transitiono（model.transition）

问题是model.Transition='rackOrShelf'或'door'ui.router似乎工作正常。但是，如果我使用model.Transition='frame'，我似乎总是能够获取门模板URL的内容？为什么会这样

这也是一个温泉浴场。 我使用$routeProvider

$routeProvider
      .when("/main", {
          templateUrl: "Scripts/html/main.html",
          controller: "mainController"
      }).when("/information", {
          templateUrl: "Scripts/html/information.html",
          controller: "informationController",
          reloadOnSearch: false
      })
      .otherwise({ redirectTo: "/main" });

所以这里有一个更新，这似乎是可行的

$stateProvider
        .state('empty', {
            template: '<div></div>'
        })
        .state('rackOrShelf', {
            templateUrl: 'Scripts/html/rackOrShelfPartial.html'
        }).state('door', {
            templateUrl: 'Scripts/html/doorPartial.html'
        }).state('frame', {
            templateUrl: 'Scripts/html/framePartial.html'
        }).state('information', {
            url: '/information',
            params: {partial: 'empty'},
            controller: function ($state) {
               $state.go($state.params.partial);
            }
        });

$stateProvider
.state（'空'{
模板：“”
})
.州（“rackOrShelf”{
templateUrl:'Scripts/html/rackOrShelfPartial.html'
}).州（“门”{
templateUrl:'Scripts/html/doorPartial.html'
}).state（'框架'{
templateUrl:'Scripts/html/framePartial.html'
}).州（“信息”{
url:“/信息”，
参数：{partial:'empty'}，
控制器：函数（$state）{
$state.go（$state.params.partial）；
}
});

在我的角度控制器中，我有这样的东西

 $state.transitionTo('information', { partial:<'door' || 'frame' || 'rackOrShelf'> });

$state.transitiono（'information'，{partial:}）；

你们三个州都有完全相同的URL。我不确定提供这些唯一的URL是否会解决您的问题，但它肯定会减少您可能遇到的其他问题：

$stateProvider
    .state('information', {
        abstract: true,
        url: '/information',
        template: '<ui-view />'
    })
        .state('information.rackOrShelf', {
            url: '/rackOrShelf',
            templateUrl: 'Scripts/html/rackOrShelfPartial.html'
        }).state('information.door', {
            url: '/door',
            templateUrl: 'Scripts/html/doorPartial.html'
        }).state('information.frame', {
            url: '/frame',
            templateUrl: 'Scripts/html/framePartial.html'
        });

$stateProvider
.州（“信息”{
摘要：没错，
url:“/信息”，
模板：“”
})
.state（'information.rackOrShelf'{
url:“/rackOrShelf”，
templateUrl:'Scripts/html/rackOrShelfPartial.html'
}).state（'information.door'{
url:“/door”，
templateUrl:'Scripts/html/doorPartial.html'
}).state（'information.frame'{
url:“/frame”，
templateUrl:'Scripts/html/framePartial.html'
});

---

例如，现在您应该能够导航到

/information/door

，或者转换到

information的状态名称。door

角度路由器可以让我们很好地处理这个问题

我认为这是解决办法

请检查这里：

---

Chris，这似乎不起作用。我已附加在问题后面。现在看来，当我执行$state.transition（'information.door'）或任何其他操作时，$routeprovider会将我转储回/main.Ken。我更新了我的解决方案以包含您的建议，这似乎有效。谢谢