子状態のネストされたビュー

Question

私のイオニアアプリケーションでは、子の状態で "order.html"というページがあります。私はこのページに2つの他のページ（ "orderheaderdetail.html"と "orderitemdetail.html"）を読み込ませたいと思います。他の2つのページ（「orderheaderdetail」や「orderitemdetail」など）を読み込むために「ui-view」を定義しました。これが正しいのかどうかわかりません。しかし、それは動作しないようです。ページのHTML「」以下の通りである：

<ion-view title="Order"> 
    <div ng-controller="OrderDetailController"> 
     <ion-content> 
      <div layout="row"> 
       <div class="panel" flex="70" flex="100" flex-sm="70"> 
        <div class="panel" flex="90"> 
         <div ui-view="orderheaderdetail"> 
         </div> 
         <div ui-view="orderitemdetail"> 
         </div> 
        </div> 
       </div> 
      </div> 
     </ion-content> 
    </div> 
</ion-view> 

ルーティングコードは以下の通りである間：

.state('protected.order', { 
      url: '/order/:_id/', 
      views : { 
       'menuContent' : { 
         templateUrl: 'templates/order.html', 
         controller: 'OrderDetailController' 
       }, 

       'orderheaderdetail' : { 
         templateUrl: 'templates/orderheaderdetail.html', 
         controller: 'OrderDetailController' 
       }, 
       'orderitemdetail' : { 
         templateUrl: 'templates/orderitemdetail.html', 
         controller: 'OrderDetailController' 
       },    
      } 
     }) 

それがなければならないので、私は抽象的に「order.html」の状態を変更することはできません。子供の状態で。だから、基本的には、他の子供たちの状態を持つ子供のようなものです。どのようにこれを解決するための任意のアイデア？ありがとう

Answer 1

ui-viewがロードされる状態をもう1つ定義できます。 $state.go('protected.order.detail')を使用してそのビューにルーティングする必要があります。

.state('protected.order', { 
     url: '/order/:_id', 
     views : { 
      'menuContent' : { 
        templateUrl: 'templates/order.html', 
        controller: 'OrderDetailController' 
      }    
     } 
    }) 
.state('protected.order.detail', { 
     url: '/detail', 
     views: { 
      'orderheaderdetail' : { 
        templateUrl: 'templates/orderheaderdetail.html', 
        controller: 'OrderDetailController' 
      }, 
      'orderitemdetail' : { 
        templateUrl: 'templates/orderitemdetail.html', 
        controller: 'OrderDetailController' 
      } 
     } 
}) 

Answer 2

あなたの子ビューは、私はそれはしかしorderitemdetail@protected@orderまたはorderitemdetail@protected.orderするかどうか分からないので、

  'orderheaderdetail@protected.order' : { 
        templateUrl: 'templates/orderheaderdetail.html', 
        controller: 'OrderDetailController' 
      }, 
      'orderitemdetail@protected.order' : { 
        templateUrl: 'templates/orderitemdetail.html', 
        controller: 'OrderDetailController' 
      },  

よう@参照して定義されるべきです。だからあなたは両方を試してみる