ng-view, вложенный в ui-view, ui-router и ngRoute одновременно - PullRequest
Новая
       46

ng-view, вложенный в ui-view, ui-router и ngRoute одновременно

0 голосов
/ 30 января 2020

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>

1 Ответ

0 голосов
/ 31 января 2020

Я продолжал пытаться не использовать два разных маршрутизатора одновременно, и наконец я нашел рабочее решение. Он основан на этом . Некоторое время я работал над решением, но, наконец, оно заработало так, как я хотел.

Здесь - мое последнее тестовое приложение.

...