如何让子状态用 Angular UI 路由器填充父状态多个视图？

How to have a substate fill the parent state multiple views with Angular UI Router?

我想要一个具有 2 个命名视图和许多子状态的 root 状态。该场景就像让用户 root 状态为 root.profile、root.password 等

然后我希望每个子状态用自己的内容填充命名视图，就像这张图片，蓝色区域硬编码在 index.html 中，黄色区域 2 个命名视图，比如 'main' 和 'right'

我正在链接一个名为 main 和 right 的 plunker，具有 root 状态和 root.substate 子状态。

plunker here

您将如何填写代码以使其工作？

请注意：我知道这个问题有替代解决方案，但我实际上是在问是否可以通过这种方式实现我刚刚描述了。

请注意：忽略图片中的面包屑区域

forked plunk: http://plnkr.co/edit/CnXIF4V1Bfdl1ndeFfNb?p=preview

  • 每个 ui-视图都已命名或未命名。 <div ui-view="name"> 或 <div ui-view>
  • 未命名ui-视图实际上被命名为“”（空字符串），即<div ui-view="">
  • 您通过在视图声明中使用 'viewname@state' 从子状态定位命名视图。
  • 在该目标中使用的状态是在其模板中具有 ui-视图的状态。

您的 index.html 是隐式根状态的模板，该状态称为“”（空字符串）。您的 'root' 状态实际上是真正根状态的子状态。出于这个原因，我在 plunk 中将你的 'root' 状态重命名为 'top'。

要在隐式根状态中定位 ui-view，您可以使用 "viewname@state"，其中 state 是空字符串。因此，使用 "main@" 完成目标主要目标，使用 "right@".

完成目标右边