ng-view 同时嵌套在 ui-view、ui-router 和 ngRoute 中答案

【问题标题】：ng-view nested in ui-view, ui-router and ngRoute at same timeng-view 同时嵌套在 ui-view、ui-router 和 ngRoute 中
【发布时间】：2020-05-16 08:13:55
【问题描述】：

ui-router 和 ngRoute 同时进行

我正在开发一个非常大的项目，该项目使用非常古老的 angularjs（1.4.3 版）和 ui-router（0.2.15 版）。目前无法更新到新版本。

该应用使用简单的状态路由。我成功尝试实现的是打开一个带有子路由的模式（ui.bootstrap）。

首先我尝试仅使用 ui-router，但 ui-router 无法识别模态模板内的 ui-view，因此无法正常工作。

之后，我尝试使用 ui-router 仅用于正常导航，使用 ngRoute 管理模式内的路由，并且成功了。

我的问题是，同时使用 ui-router 和 ngRoute 是否会导致副作用或其他难以检测的问题。

这是一个带有我的测试应用程序的 Plunker。 Plunker

angular.module('router_app', ['ui.router', 'ui.bootstrap', 'ngRoute'])
.config(function ($stateProvider, $routeProvider) {
    $stateProvider
        .state('my_state', {
            url: '/my_state',
            views: {
                'my_view': {
                    templateUrl: '/templates/my_state.tpl',
                    controller: 'ctrl_my_state'
                }
            }
        });

    $routeProvider
        .when("/my_state/my_modal", {
            templateUrl: "/templates/my_modal.tpl",
            controller: "ctrl_my_modal"
        })
        .when("/my_state/my_modal/my_modal_a", {
            templateUrl: "/templates/my_modal_a.tpl",
            controller: "ctrl_my_modal_a"
        })
        .when("/my_state/my_modal/my_modal_b", {
            templateUrl: "/templates/my_modal_b.tpl",
            controller: "ctrl_my_modal_b"
        });
})

.run(function ($state) {
    $state.go("my_state");
})

my_modal.tpl

<div ng-controller="ctrl_my_modal">
    MODAL
    <button ng-click="closeModal()">close</button>
    <button ng-click="gotoA()">goto a</button>
    <button ng-click="gotoB()">goto b</button>
    <div ng-view></div>
</div>

index.html

<html ng-app="router_app">
    <body>
        <div ui-view="my_view"></div>
    </body>
</html>

【问题讨论】：

UI-Router 可以嵌套状态。让它工作而不是使用两个路由器进行破解会更明智。
@georgeawg 你能举个例子吗？该问题似乎与嵌套状态无关，但 ui-router 无法处理模态内容。我找到了一个例子link，但不符合我的需要。我有不可重复使用的产品页面和可重复使用的购买模式。当我们添加支付方式时，我想要在模式中使用不同的状态，因为我已经有了一些模板/控制器，但是由于重新设计，所有东西都必须在弹出窗口中，所以我认为子路由可以工作。它是自动售货机的软件，所以 ui 相当复杂。

标签： angularjs angular-ui-router ngroute

【解决方案1】：

我继续尝试不同时使用两个不同的路由器，最后我想出了一个可行的解决方案。它基于this。我在解决方案上运行了一段时间，但最终我让它按我的意愿工作。

Here 是我的最终测试应用。

【讨论】：