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

发布于 2020-04-06 00:18:22

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。柱塞

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>

提问者

user2528041

被浏览

查看英文版

查看原文

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

ui-router和ngRoute同时

my_modal.tpl

index.html

热门帖子

相关问题

热门github