ui.router «иначе» не работает

Я пытаюсь заставить ui.router работать со следующей настройкой.

export class Router {
    /* tslint:disable no-unused-variable */
    private static $inject: string[] = ["$stateProvider", "$urlRouterProvider", "$locationProvider"];
    /* tslint:enable no-unused-variable */

    constructor($state: ng.ui.IStateProvider, $urlRouter: ng.ui.IUrlRouterProvider, $location: ng.ILocationProvider) {
        $urlRouter.otherwise("/");

        $state.state("default", {
            url: "/",
            views: {
                "header": {
                    templateUrl: "/views/layout/header.html"
                },
                "sidebar": {
                    templateUrl: "/views/layout/side-menu.html"
                },
                "": {
                    templateUrl: "/views/workspace/index.html"
                },
                "footer": {
                },
            }
        });

        $location.html5Mode(true);
    }
}

Вот частичный файл, который я использую.

<div id="workspace">
    <div id="workspace-header">
        <div data-ui-view="header"></div>
    </div>
    <div id="workspace-container">
        <div>
            <div data-ui-view="sidebar"></div>
        </div>
        <div>
            <div>
                <div>
                    <div id="workspace-view">
                        <div data-ui-view></div>
                    </div>
                    <div id="workspace-footer">
                        <div data-ui-view="footer"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Я не уверен, что это связано (или является ли это проблемой), но приведенный выше html вставляется с помощью ng-include вот так.

<div id="dashboard" data-ng-include="'/views/master.html'" data-prevent-touch-scroll></div>

Просто чтобы быть ясным, я проверил, что маршрутизатор вызывается.

Я думал, что «иначе» перейдет к URL-адресу, и он перейдет в состояние по умолчанию, которое будет вводить частичные представления, но, похоже, это не работает, я уверен, что что-то упускаю, но я не могу понять это.


typescript angularjs angular-ui-router
person Eyal Alon    schedule 13.10.2014    source источник
comment
В этом случае плунжер всегда поможет. Работает без html5?   -  person Radim Köhler    schedule 13.10.2014
comment
Я сделаю пример и обновлю его.   -  person Eyal Alon    schedule 13.10.2014
comment
Я пытался заставить это работать в Plunker, но кажется, что он выдает 404 для моего style.css и app.js..   -  person Eyal Alon    schedule 13.10.2014
comment
Какую версию Angularjs вы используете? Вы пробовали это: stackoverflow.com/questions /17200231/   -  person wojjas    schedule 13.10.2014
comment
Я использую версию 1.3.0-rc.5. У меня есть базовый тег как часть моей страницы, похоже, проблема с ng-include.   -  person Eyal Alon    schedule 13.10.2014
comment
@EyalShilony, есть ответ stackoverflow.com/a/26009350/1679310, в котором я создал плункер, показывающий, как использовать HTML5. Это помогает?   -  person Radim Köhler    schedule 13.10.2014
comment
К сожалению, нет, но я решил это! Я предоставлю решение.   -  person Eyal Alon    schedule 13.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я решил это, заменив ng-include на ui-view.

<div id="dashboard" data-ui-view data-prevent-touch-scroll></div>

Мой роутер выглядит так.

export class Router {
    /* tslint:disable no-unused-variable */
    private static $inject: string[] = ["$stateProvider", "$urlRouterProvider", "$locationProvider"];
    /* tslint:enable no-unused-variable */

    constructor($state: ng.ui.IStateProvider, $urlRouter: ng.ui.IUrlRouterProvider, $location: ng.ILocationProvider) {
        $urlRouter.otherwise("/");

        $state.state("default", {
            url: "/",
            templateUrl: "/views/master.html",
            onEnter: ["$state", "$timeout", ($state: ng.ui.IStateService, $timeout: ng.ITimeoutService) => {
                $timeout(() => {
                    $state.go("default.master");
                });
            }]
        });

        $state.state("default.master", {
            views: {
                "header": {
                    templateUrl: "/views/layout/header.html"
                },
                "sidebar": {
                    templateUrl: "/views/layout/side-menu.html"
                },
                "": {
                    templateUrl: "/views/workspace/index.html"
                },
                "footer": {
                },
            }
        });

        $location.html5Mode(true);
    }
}

Я не уверен, является ли это решением или взломом, но это работает. :)

person Eyal Alon    schedule 13.10.2014