ui-routerのネストされたui-viewのデフォルト状態

Question

私は、複数のステップフォーム用に作成されたディレクティブがあるプロジェクトに取り組んでいます。本質的にthisを複製しようとしています。プロジェクトレイアウトには、ナビゲーションタブで選択したタブに応じてヘッダー、ナビゲーション、コンテンツページ（UIビューを含む）があります。

このフォームディレクティブを含むHTMLページをクリックすると、フォームタブが表示されます。テンプレート（別のUIビューを含む）を呼び出すディレクティブはHTMLコンテンツをロードしますが、ネストされた状態をロードすることに失敗しました。どのようにデフォルト状態を設定しますか？

プロジェクトディレクトリはapp.jsファイルがappRun.htmlが

<form-data></form-data> 

formData.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' 
     }); 

として定義された状態を持っている

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 

のように見えます外見は

私はappRun状態をクリックすると

formData.tpl.htmlは、それがformData.htmlのコンテンツをアップ示していますが、UIビューは、デフォルトの状態が表示されない

<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> 

のように見えます。 formData.htmlが読み込まれたときにappRun.first状態も表示されるように、どのようにデフォルト状態を追加するのですか？ <div ui-view></div>インサイド

Answer 1

使用

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

。これがデフォルトのページになります。

他のオプション：

1. マーク状態appRun抽象的な。
2. appRunにリンクすると、いつでもappRun.firstにリンクされます。