如何让一个子状态用Angular UI Router填充父状态多个视图？

Question

我想拥有一个root状态，其中包含2个命名视图和许多子状态。该方案就像拥有root，root.profile等用户root.password州一样。

然后我希望每个子状态用自己的内容填充命名视图，类似于这个图像，是index.html中硬编码的蓝色区域，黄色区域2命名为视图，比如'main'和{{ 1}}

我将视图命名为'right'和main的动画链接与right状态和root子状态相关联。

plunker here

您如何填写代码才能使其正常工作？

请注意：我知道此问题有替代解决方案，但我实际上是在询问是否可以按照我刚才描述的方式实现。

请注意：只需忽略图片中的痕迹区域

Answer 1

分叉插： http://plnkr.co/edit/CnXIF4V1Bfdl1ndeFfNb?p=preview

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

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

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