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路由器嵌套视图不显示任何东西

回答

相关问题