ui-router中的嵌套ui-view中的默認狀態

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但用戶界面視圖的內容不顯示默認狀態。我如何添加一個默認狀態，以便當formData.html被加載時它也顯示appRun.first狀態？

Answer 1

使用

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

內<div ui-view></div>。這將是默認頁面。

另一種選擇：

1. 馬克狀態appRun抽象。
2. 每當鏈接到appRun鏈接到appRun.first而不是。