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

Question

ui-router和ngRoute同时存在

我正在开发一个 quite 大型项目，该项目使用非常古老的 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>

Answer 1

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

Here 是我的最终测试应用。

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

ng-view nested in ui-view, ui-router and ngRoute at same time

angularjs

angular-ui-router

ngroute

ui-router和ngRoute同时存在

my_modal.tpl

index.html