如何使用角度 ui.router 过渡到多个视图答案

【问题标题】：How to transitionTo multiple views using angular ui.router如何使用角度 ui.router 过渡到多个视图
【发布时间】：2017-03-30 13:23:24
【问题描述】：

我在使用 ui.router 时遇到了一些问题。我已经定义了我认为可以在 3 个状态之间切换的状态

$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-view 占位符

html页面定义了一个ng-controller，它做一些工作并返回一个json模型，其中一个参数是一个

model.Transiton = 'frame';

然后我用它来调用它。 $state.transitionTo(model.Transiton);

问题是如果 model.Transition = 'rackOrShelf' 或 'door' ui.router 似乎工作正常。但是如果我这样做 model.Transition = 'frame' 我总是似乎得到了门模板Url的内容？这是为什么呢？

这也是一个 SPA。我使用 $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);
            }
        });

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

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

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您的所有三个州都有完全相同的网址。我不确定提供这些唯一的 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'
        });

现在您应该可以导航到/information/door，或者转换到状态名称information.door

【讨论】：

克里斯，这似乎不起作用。我已经附加了这个问题。现在似乎当我执行 $state.transitionTo('information.door') 或任何其他操作时，$routeprovider 会将我转储到 /main。

【解决方案2】：

Angular Router 让我们可以很好地处理这个问题

我认为嵌套状态是解决方案。

请在此处查看：

Different states for same URL #217

Re-use a URL for states #1096

【讨论】：

Ken 我更新了我的解决方案以包含您的建议，似乎有效。谢谢