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无法实现您的目标.你所描述的是一个模态组件(最好写成一个指令),它独立于主状态跟踪它的状态.

考虑它的方法是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

至于解决你的直接问题,我认为"最简单"的方法是放弃控制状态配置中模态的状态.

相反,我会添加某种根或抽象状态,然后跟踪模态是否在那里打开.然后,您可以使用此处所示的事件在控制器之间进行通信.注意:听取有性能影响$rootScope,所以一定要研究它们.但是(有人随意纠正我),这里的实现没有那些问题,因为AppCtrl它永远不会被破坏.

2015年1月15日编辑

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

它还包括延迟加载的实用程序,称为"未来状态",非常有用.

话虽这么说,我希望有时间工作的一个功能是维护URL(或者可能是本地存储)中的所有状态,并允许可重用​​的状态"组件".后者也在UI路由器路线图中.