javascript - ui-router 中嵌套 ui-view 的默认状态

Question

我正在开发一个项目，在该项目中我为多步骤表单创建了指令。本质上是试图复制this 。项目布局具有标题、导航、内容页面(包括 ui View )，具体取决于导航选项卡上选择的选项卡。

现在有一个表单选项卡，单击该选项卡将路由到包含此表单指令的 HTML 页面。该指令调用模板(其中包括另一个 ui-view)加载 html 内容，但无法加载嵌套状态。如何设置默认状态？

项目目录看起来像

src
   main
       app
          directive
                  formData
                          formData.js
                          formData.tpl.html
                          formInterest.tpl.html
                          formProfile.tpl.html
                          formFinal.tpl.html
          views
               header.html
               leftNavigation.html
               appRun.html
          app.js
          index.html

app.js 文件的状态定义为

$stateProvider
        .state('landingPage', {
            url: '/landingPage',
            templateUrl: 'views/landingPage.html'
        })
        .state('appRun', {
            url: '/appRun',
            templateUrl: 'views/appRun.html'
        })
        .state('appRun.first', {
            url: '/first',
            templateUrl: 'directives/formData/formProfile.tpl.html'
        })
        .state('appRun.second', {
            url: '/second',
            templateUrl: 'directives/formData/formInterest.tpl.html'
        })
        .state('appRun.third', {
            url: '/third',
            templateUrl: 'directives/formData/formFinal.tpl.html'
        });

appRun.html 看起来像

<form-data></form-data>

formData.js 指令看起来像

var formData = angular.module('formData',[]);

formData.directive('formData',function(){
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        link: function($scope, element, attributes){

        },
        controller: function($scope,$attrs,$http){

            $scope.processForm = function(){
                console.log("processFrom");
            }
        },
        templateUrl: 'directives/formData/formData.tpl.html'
    }
});

formData.tpl.html 看起来像

<div class="row">
    <div class="col-sm-8 col-sm-offset-2">

        <div id="form-container">

            <div class="page-header text-center">
                <h2>Let's Be Friends</h2>

                <!-- 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=".first"><span>1</span> Profile</a>
                    <a ui-sref-active="active"  ui-sref=".second"><span>2</span> Interests</a>
                    <a ui-sref-active="active"  ui-sref=".third"><span>3</span> final</a>
                </div>
            </div>

            <!-- use ng-submit to catch the form submission and use our Angular function -->
            <form id="signup-form" ng-submit="processForm()">

                <!-- our nested state views will be injected here -->
                <div  ui-view></div>


            </form>

        </div>

        <!-- show our formData as it is being typed -->
        <pre>
            {{ formData }}
        </pre>


    </div>
</div>

当我单击 appRun 状态时，它会显示 formData.html 中的内容，但 ui-view 不会显示默认状态。如何添加默认状态，以便在加载 formData.html 时也显示 appRun.first 状态？

Answer 1

使用

<ng-include="'directives/formData/formProfile.tpl.html'"/>

内部<div ui-view></div> 。这将是默认页面。

另一个选项:

1. 标记状态appRun摘要。
2. 每当链接到appRun时链接至appRun.first相反。