ui.router“否则”似乎不起作用答案

【问题标题】：ui.router 'otherwise' doesn't seems to workui.router“否则”似乎不起作用
【发布时间】：2014-12-07 15:32:04
【问题描述】：

我正在尝试让 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，它会转换到默认状态，这将注入部分视图，但它似乎不起作用，我确定我错过了一些东西，但我想不通出来吧。

【问题讨论】：

在这种情况下，plunker 总是有帮助的。没有 html5 也能用吗？
我会做一个例子并更新它。
我试图在 Plunker 中完成这项工作，但它似乎为我的 style.css 和 app.js 抛出 404 ..
您使用的是哪个版本的 Angularjs？你试过这个：stackoverflow.com/questions/17200231/…
我使用的是 1.3.0-rc.5 版本。我确实将基本标签作为我的页面的一部分，这似乎是 ng-include 的问题。

标签： angularjs typescript angular-ui-router

【解决方案1】：

我通过将 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);
    }
}

我不确定这是一个解决方案还是一个 hack，但它确实有效。 :)

【讨论】：