Question

我正在尝试让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>

为了清楚起见，我确认路由器已被调用。

我认为'否则'会导航到网址并且它将转入默认状态，这将注入部分视图，但它似乎不起作用，我敢肯定我错过了一些东西，但我无法想象它出来了。

Answer 1

我通过用ui-view替换ng-include来解决它。

<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);
    }
}

我不确定这是一个解决方案还是一个黑客，但它确实有效。：）

ui.router＆＃39;否则＆＃39;似乎不起作用

1 个答案: