Question

我想使用angularjs创建多步形式。这是代码：

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

        .config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterPorvider) {
            $urlRouterPorvider.otherwise("/Game/Home");

            $stateProvider
                .state("Home", {
                    url: "/Game/Home",
                    templateUrl: "/app/Game/GameView.html",
                    controller: "GameController as vm"
                });

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

            $stateProvider
             .state("MultiStepForm", {
                 url: "/Game/MuiltyStepForm",
                 templateUrl: "/app/MultiStepForm/MuiltyStepForm.html"
             });

            $stateProvider
              .state("MultiStepForm.view", {
                  url: "/Game/MuiltyStepForm/view",
                  templateUrl: "/app/MultiStepForm/MuiltyStepForm.html"
              })

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

当我尝试转到状态 MultiStepForm.view.step2

时出现此错误

错误：无法从状态'MultiStepForm.view'解析'.MultiStepForm.view.step2'

知道我为什么会收到错误吗？

我可以在嵌套状态下创建嵌套状态吗？

Answer 1

嗨，这是因为您在示例中使用嵌套状态

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

step2继承自step1而不是multistepform.view

我认为你应该能够通过这样做来解决它：

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

查看此网址，了解有关嵌套状态nested views in angular

的更多信息

使用角度创建多步形式

1 个答案: