AngularJS UI 라우터 : 요청시 형제보기로드

Question

필요에 따라 형제보기를 구현하는 방법을 검색했습니다. 지금까지 내가 성취 한 것은 그것들을 하나로 모으는 것이다. 아래는 제가 작업하고있는 샘플입니다. 왼쪽의 항목을 클릭하면 항목의 세부 정보와 두 개의 명명 된보기가 포함 된 파란색의 오른쪽 UI보기가로드됩니다. 항목 구성 및 항목 가격은 두 개의 앵커 태그로 클릭하면 해당보기가 표시됩니다.

설명이 도움이되고 누군가가 도움이 될만한 해결책을 제공 할 수 있기를 바랍니다. UI의 (HTCOne.cshtml)

<div class="row"> 
<div class="col-md-5 "> 
    <h1>Meet HTC One M8</h1> 
</div> 

<div class="col-md-5 "> 
    <a ui-sref="SmartPhone.HTCOne.Config">See Configuration</a> 
</div> 
<div class="col-md-2"> 
    <a ui-sref="SmartPhone.HTCOne.Price">Price Range</a> 
</div> 
</div> 
<div class="row"> 
    <div class="col-md-5 "> 
     <img src="~/Content/Images/HTCM8.JPG" /> 
    </div> 

    <div class="col-md-5 "> 
     <div ui-view="Config" autoscroll=" false"></div> 
    </div> 
    <div class="col-md-2 "> 
     <div ui-view="Price" autoscroll="false"></div> 
    </div> 
</div> 

UI 라우터 코드

.state('SmartPhone.HTCOne', { 
    url: '/HTCOne', 
    templateUrl: '/home/HTCOne' 
}) 
.state('SmartPhone.HTCOne.Price', { 
    views: { 
     'Price': { 
      template: '<B>Ranges form $ - $</B>' 
     }, 
     'Config': { 
      templateUrl: '/home/HTCOneConfig' 
     } 
    } 
}) 

다른 버전을 다음

보기

붉은 테두리 작성된 -Router - 내가 너라면 우리 즉 두 개의 상이한 상태는 두 명명 된 뷰에 대해, I 상호 exculsive 엉뚱한

 .state('SmartPhone.HTCOne', { 
     url: '/HTCOne', 
     templateUrl: '/home/HTCOne' 
    }) 
    .state('SmartPhone.HTCOne.Price', { 
     views: { 
      'Price': { 
       template: '<B>Ranges form $ - $</B>' 
      } 
     } 
    }) 

.state('SmartPhone.HTCOne.Config', { 
    views: { 

     'Config': { 
      templateUrl: '/home/HTCOneConfig' 
     } 
    } 
}) 

Answer 1

UI 라우터처럼 행동하고, 한 번에 표시된 하나의 뷰 본질적 상태 기계를 얻는다. 특정 시간에 하나의 상태로만 존재할 수 있습니다 (아이들 상태가 활성 상태 일 때 활성 상태 인 부모 상태는 제외).

상황에 따라 가격과 설정이 어느 정도 표시되기를 원하십니까? 그렇다면 상태를 사용하는 것이 적절하지 않습니다. 대신 ng-includes를 사용해야합니다.

업데이트 : 당신이 실제로 블랙 박스는 "일부 구성"과 "상품 가격"위한 명명 된 UI-뷰, 즉

<div ui-view="Price"></div> 
<div ui-view="Config"></div>