Angular UI路由器嵌套視圖不顯示任何東西

我已經經歷了幾個類似的問題在這裏，仍然無法弄清楚我做錯了什麼。我正在尋找加載視圖內的視圖（這也恰好在另一個視圖內）。Angular UI路由器嵌套視圖不顯示任何東西

rules.html中的代碼沒有出現。我誤解了ui-router背後的概念嗎？

在Firefox的開發者控制檯我只是得到

的index.html

<body ng-app="App"> 
    <div class="container" ui-view="container" ></div> 
</body>

parent.html

<div> 
    //some wrapper stuff 
    <div ui-view="parent"></div> 
</div>

編輯entity.html

<div ng-controller="ProjectManagerController as data"> 
     // other code showing fine 
     <div ui-view="rules"></div> 
     // other code showing fine 
</div>

rules.html

<div>TEST CODE</html>

app.js

$stateProvider 
    .state('app', { 
     views: { 
      'container': { 
       templateUrl: 'views/parent.html?nd=' + Date.now(), 
       controller: 'MainController as data' 
      } 
     } 
    }) 
    .state('edit-entity', { 
     parent: 'app', 
     url: '/entity/{id:int}/edit', 
     views: { 
      'parent': { 
       templateUrl: 'views/entity-edit.html?nd=' + Date.now(), 
       controller: 'MainController as main' 
      } 
     } 
    }) 
    .state('rules', { 
     parent: 'edit-entity', 
     views: { 
      'rules': { 
       templateUrl: 'views/rules.html?nd=' + Date.now(), 
       controller: 'MainController as data' 
      } 
     } 
    });

編輯：我也曾嘗試rules.entity

來源

2017-08-11 Adrian

難道我的解決方案解決問題了嗎？ –

你可以嘗試，如果這個工程 -

.state('rules', { 
    parent: 'edit-entity', 
    views: { 
     '[email protected]': { 
      templateUrl: 'views/rules.html?nd=' + Date.now(), 
      controller: 'MainController as data' 
     } 
    } 
});

我剛在視圖名稱（絕對命名）後加了'@'。你可以在這裏閱讀更多 - https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names。我發現這有時適合我。

來源

2017-08-11 18:45:22 ami91

感謝您的幫助，但不幸的是沒有喜悅。我早些時候嘗試過類似的東西。很奇怪！ – Adrian

您需要從父狀態跟蹤嵌套狀態的路徑。編輯：我添加了一個Plunker爲您的工作：http://plnkr.co/edit/mBYdUTEkaLsqhI6MNW4I?p=preview

.state('app', { 
    views: { 
     'container': { 
      templateUrl: 'views/parent.html?nd=' + Date.now(), 
      controller: 'MainController as data' 
     }, 
     '[email protected]': { 
      templateUrl: 'views/entity-edit.html?nd=' + Date.now(), 
      controller: 'MainController as main' 
     } 
     '[email protected]': { 
      templateUrl: 'views/rules.html?nd=' + Date.now(), 
      controller: 'MainController as data' 
     } 
    } 
});

來源

2017-08-11 19:13:02

謝謝，但你確定這是完全正確的嗎？我有點失落，爲什麼'edit-entity'是'app'的父親，也不知道這個訂單來自'container.parent.rules.edit-entity'的位置，如果它不是'container.parent。編輯entity.rules'？ – Adrian

@Adrian非常抱歉，父母是一個錯字。我已經更新了它 –

Angular UI路由器嵌套視圖不顯示任何東西

回答

相關問題