ui路由器嵌套視圖無法解析狀態

Question

我嘗試在我的應用程序中創建嵌套視圖。 這是我如何努力，我有父UI視圖

<div class="ui-view-container col-lg-offset-2 col-lg-10 col-md-offset-2 col-md-10 col-sm-12 col-xs-12" ng-cloak> 
       <div ui-view></div> 
      </div> 

，我改變我的web應用程序的所有狀態。例如，這是一個國家

.state('distributorItem', { 
       url: '/distributorItem', 
       templateUrl: 'distributorItem.html', 
       controller: 'distributorItem', 
       authentication: {roles: ["distributor"]} 
      }) 

這裏面的狀態，我想再拍菜單，用戶可以選擇項目，通過ID查找信息，下面是例子，我是怎麼過ID PARAMS和添加子UI視圖

<table class="table-hover"> 
      <thead> 
       <tr> 
        <th>Item ID</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="(key, value) in itemIdInClientDetail"> 
        <td><a ui-sref="client/info/{{value.id}}">{{value.id}}</a></td> 
       </tr> 
      </tbody> 
     </table> 
     <div class="col-lg-11 col-md-11 col-sm-10 col-xs-12"> 
     <div ui-view></div> 
     </div> 

有子狀態

.state('distributorItem.client/info/:itemID', { 
       url: '/client/info/:itemID', 
       templateUrl: 'clientItemInfo.html', 
       controller: 'clientItemInfo', 
       authentication: {roles: ["distributor"]} 
      }) 

這不工作，因爲我在控制檯收到此錯誤

angular.js:12477 Error: Could not resolve 'client/info/1126' from state 'distributorItem'

PLS，幫助... ...日Thnx

編輯：

---

我作出這樣@Maxim Shoustin改變回答。現在狀態改變，但在孩子導航當我點擊項目，父UI的觀點是完全刷新（小孩導航和用戶界面視圖）不僅孩子
現在我的狀態看起來像這樣

.state('client', { 
       url: '/client/info/:itemID', 
       templateUrl: 'clientInfo.html', 
       controller: 'detailControllerClient as vm', 
      }) 
      .state('client.detail', { 
       url: '/detail/:itemID', 
       templateUrl: 'itemInfoById.html', 
       controller: 'detailControllerClient as vm', 
      }) 

和HTML是這裏。 （infoDisplay.html裏面的index.html父視圖。此UI視圖代碼波紋管子視圖（client.detail）） infoDisplay.html

<div class="new_nav col-lg-1 col-md-1 col-sm-2 col-xs-12"> 
      <table class="table-hover"> 
       <thead> 
        <tr> 
         <th>item ID</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="(key, value) in clientDetail"> 
         <td><a ui-sref=".detail({'itemID': value.id})">{{value.id}}</a></td>  
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <div ui-view></div> 

Answer 1

你必須使用這種格式

.state('detail', { 
    url: '/client/info/{itemID}', 

和

ui-sref="detail({itemID: '1126'})" 

更多見Give URL with ID in Angular UI Router和How to pass parameters using ui-sref in ui-router to controller

Answer 2

試試這個

.state('distributorItem', { 
      url: '/distributorItem', 
      abstract:true, 
      templateUrl: 'distributorItem.html', 
      controller: 'distributorItem', 
      authentication: {roles: ["distributor"]} 
     }) 
     .state('distributorItem.client', { 
      url: '/client/info/:itemID', 
      templateUrl: 'clientItemInfo.html', 
      controller: 'clientItemInfo', 
      authentication: {roles: ["distributor"]} 
     })