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

Question

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

(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[=26=时让MultiStepForm.Edit.step1状态默认显示关联视图]状态激活？

Answer 1

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

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

查看文档：

when(what, handler)

Registers a handler for a given url matching. if handle is a string, it is treated as a redirect, and is interpolated according to the syntax of match (i.e. like String.replace() for RegExp, or like a UrlMatcher pattern otherwise).

If the handler is a function, it is injectable. It gets invoked if $location matches. You have the option of inject the match object as $match.

The handler can return

falsy 表示规则终究不匹配，然后 $urlRouter 将继续尝试寻找另一个匹配的规则。
string 被视为重定向并传递给 $location.url()
void 或任何真值告诉 $url 路由器 url 已被处理。

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

How to activate default nested state inside nested states?

state

angularjs

angular-ui-router