Question

我在neste状态中有嵌套状态，这里是控制器定义：

(function () {
"use strict";
angular.module("gameManagement", ["ui.router", "ngAnimate", "ngResource", "toaster"])

    .config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/game/MultiStepForm/step1");
        $urlRouterProvider.otherwise("/game/Home");
        $stateProvider
            .state("Home", {
                url: "/game/Home",
                templateUrl: "/app/game/GameView.html",
                controller: "GameController",
                controllerAs: "vm"
            });

        $stateProvider
            .state("Log", {
                url: "/Game/Log",
                templateUrl: "/app/Log/GameLogView.html",
                controller: "GameLogController",
                controllerAs: "vm"
            });

        $stateProvider
        .state("MultiStepForm.view", {
            url: "/Game/MultiStepFormView",
            templateUrl: "/app/MultiStepForm/MultiStepFormView.html",
            controller: "MultiStepFormViewController",
            controllerAs: "MultiStepViewLogic"
        })

        $stateProvider
    .state("MultiStepForm.Edit", {
        url: "/Game/MultiStepFormEdit",
        templateUrl: "/app/MultiStepFormEdit/MultiStepForm.html",
        controller: "MultiStepFormEditController",
        controllerAs: "MultiStepEditLogic"
    })
        .state('MultiStepForm.Edit.step1', {
            url: '/step1',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep1.html'
        })
        .state('MultiStepForm.Edit.step2', {
            url: '/step2',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep2.html'
        })
        .state('MultiStepForm.Edit.step3', {
            url: '/step3',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep3.html'
        });
    }]);
})();

此行定义了多步形式：

        .state('MultiStepForm.Edit.step1', {
            url: '/step1',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep1.html'
        })
        .state('MultiStepForm.Edit.step2', {
            url: '/step2',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep2.html'
        })
        .state('MultiStepForm.Edit.step3', {
            url: '/step3',
            templateUrl: '/app/MultiStepForm/NestedViews/FormStep3.html'
        });

以下是MultiStepForm.Edit状态的视图：

<!-- form.html -->
<div class="row">
    <div class="col-sm-8 col-sm-offset-2">
        <div id="form-multiple-step">
            <div class="page-header text-center">

                <!-- the links to our nested states using relative paths -->
                <!-- add the active class if the state matches our ui-sref -->
                <div id="status-buttons" class="text-center">
                    <a ui-sref-active="active" ui-sref="MultiStepForm.Edit.step1"><span>STEP1</span></a>
                    <a ui-sref-active="active" ui-sref="MultiStepForm.Edit.step1"><span>STEP2</span></a>
                    <a ui-sref-active="active" ui-sref="MultiStepForm.Edit.step1"><span>STEP3</span></a>
                </div>
            </div>
            <form id="single-form">
                <!-- our nested state views will be injected here -->
                <div id="form-views" ui-view></div>
            </form>            
        </div>
    </div>
</div>

当激活 MultiStepForm.Edit 状态时，没有显示网络视图，只有当用户在视图表单中按下按钮并且UI-SREF激活相应状态时，才会显示它们。

我的问题是，当 MultiStepForm.Edit 状态被激活时，如何默认显示 MultiStepForm.Edit.step1 状态显示关联视图？

Answer 1

这里最简单的方法是使用 $urlRouterProvider.when()

$urlRouterProvider.when("/game/MultiStepForm", "/game/MultiStepForm/step1");

检查文档：

when(what, handler)

为给定的网址匹配注册处理程序。如果handle是一个字符串，则将其视为重定向，并根据match的语法进行插值（例如，像RegExp的String.replace（），或者像UrlMatcher模式一样）。

如果处理程序是一个函数，它是可注入的。如果$ location匹配，则会调用它。您可以选择将匹配对象注入$ match。

处理程序可以返回

falsy 表示该规则毕竟不匹配，然后$ urlRouter将继续尝试找到另一个匹配的规则。
string ，被视为重定向并传递给$ location.url（）
void 或任何truthy值告诉$ urlRouter网址已被处理。

如何激活嵌套状态中的默认嵌套状态？

1 个答案: