Question

我正在开发一个项目，我已经创建了一个多步骤表单的指令。基本上试图复制this。项目布局具有标题，导航，内容页面（包括ui视图），具体取决于导航选项卡上选择的选项卡。

现在有一个表单选项卡，当单击时会路由到包含此表单指令的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>内。这将是默认页面。

另一种选择：

标记状态appRun摘要。
每次链接到appRun链接到appRun.first时。

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

1 个答案: