Angular-ui 路由器同时获得两个处于活动状态的状态

Question

我需要并行使用两种状态，一种用于我的页面，另一种用于具有多个子状态的模式。 现在调用模态状态将清除我的页面，因为页面状态发生了变化。

创建我的页面的子状态子级不是解决方案，因为模式将在多个页面上使用。

例子：

$stateProvider
.state('user', {}) // page
.state('bookshelf', {}) // page
.state('books', {}) // modal
.state('books.read', {}) // sub state of modal

因此，如果我在 user 并打开我的模态，那么状态将更改为 books，我的模态将具有内容，但页面内容将被清除。

我该如何解决？

Answer 1

我相信 UI.Router 目前无法实现您想要的方式。您所描述的是一个模态 component （理想情况下将被写为指令），它独立于主状态跟踪它的状态。

想一想，UI.Router 通过创建状态树来工作。在任何给定时间，您只能查看树的一个分支。你可以深入一个分支（即：book、book.open、book.open.checked），但你不能同时在两个地方。

上述问题的另一个问题是如何将两个不同树的状态序列化到一个 url 中？不是说做不到，只是很难解决。

检查这些问题：

• https://github.com/angular-ui/ui-router/issues/119
• https://github.com/angular-ui/ui-router/issues/384
• https://github.com/angular-ui/ui-router/issues/475

同时查看这些存储库，它们可能更有助于解决问题。

• https://github.com/afterglowtech/angular-detour
• https://github.com/stu-salsbury/angular-couch-potato

就解决您当前的问题而言，我认为“最简单”的方法是放弃控制状态配置中的模态状态。

相反，我会添加某种根或抽象状态，然后跟踪模态是否在那里打开。然后，您可以使用 shown here 的事件在控制器之间进行通信。注意：有performance implications 与$rootScope 一起收听，所以一定要研究这些。但是（有人随时纠正我），这里的实现没有这些问题，因为AppCtrl 永远不会被破坏。

---

2015 年 1 月 15 日编辑

事实证明这是一个非常流行的用例，UI Router 的核心贡献者之一维护了一个名为 UI Router Extras 的插件/附加项

它还包括用于延迟加载的实用程序，称为“未来状态”，非常有用。

话虽如此，我希望花时间研究的一项功能是维护 URL 中的所有状态（或者可能是本地存储）并允许可重用​​状态“组件”。后者也在 UI Router 路线图中。