하위 상태의 중첩 된보기

Question

내 이안 응용 프로그램에서 자식 상태의 페이지 "order.html"이 있습니다. 이 페이지에 두 개의 다른 페이지 ("orderheaderdetail.html"및 "orderitemdetail.html")를로드하고 싶습니다. 두 개의 다른 페이지 (예 : "orderheaderdetail"및 "orderitemdetail")를로드하려면 'ui-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"의 상태를 변경할 수 없습니다 : 라우팅 코드는 다음과 같다 동안

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

: 페이지 "A"의 HTML은 다음과 같다 아동 상태. 그래서 기본적으로 그것은 다른 아이들 상태를 갖는 아이 상태와 같습니다. 어떤 생각이 어떻게 해결할 수 있습니까? 감사합니다.

Answer 1

ui-view가로드 될 상태를 하나 더 정의 할 수 있습니다. $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' 
      },  

처럼 @ 참조하여 정의되어야한다. 그래서 당신은 모두 시도해야합니다