棱角分明的UI路由器得到两种状态活跃在并行 [英] Angular-ui Router get two states active in parallel

问题描述

我需要使用并联两种状态，一个是我的网页的其他与几个子状态的模式。
眼下调用模式状态将消灭我的网页，因为页面的状态变化。

I need to use two states in parallel, one for my page and an other for a modal with several sub states. Right now calling the modal state will wipe out my page since the page state changed.

创建我的网页的子状态的孩子不会是一个解决方案，因为该模式将在多个页面中使用。

Create a child state child of my page wouldn't be a solution since the modal will be used on several pages.

例如：

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

所以，如果我在用户键，打开我的模式则状态将变为图书，我的情态那么将有内容，但页面内容将被消灭。

So if I'm on user and open my modal then the state would change to books, my modal would then have the content but the page content will be wiped out.

如何解决呢？

推荐答案

我相信你正在寻找这样做的方式是不可能的UI.Router目前。什么你所描述的是一个模式的组件的（这在理想情况下被写成一个指令），追踪它的状态独立于主状态。

I believe the way you're looking to do this is not possible with UI.Router currently. What you're describing is a modal component (which would ideally be written as a directive), which tracks it's state independently from the main state.

去想它的方式，是UI.Router的工作原理是创建一个状态树。在任何时候，你只能看树的一个分支。你可以去更深的下跌分公司（即：书， book.open ，的书。 open.checked ），但你不能在两个地方一次。

The way to think about it, is that UI.Router works by creating a state tree. At any given time you can only be looking at one branch of the tree. You can go deeper down a branch (ie: book, book.open, book.open.checked), but you can't be in two places at once.

与上面的问题的另一个问题是，你怎么序列化两个不同的树的状态到一个网址？这并不是说不能做，这只是解决了一个困难的问题。

Another issue with the problem above is how do you serialize the state of the two different trees into one url? It's not to say it can't be done, it's just a hard problem to solve.

结帐这些问题：

• 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

另外检出这些回购，他们可能会进一步沿着解决问题的行

Also checkout these repos, they might be further along the lines of solving the problem.

• https://github.com/afterglowtech/angular-detour


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

至于解决您眼前的问题，我觉得最简单的方法是控制沟的状态里面配置模态的状态。

As far as solving your immediate problem, I think the 'easiest' way would be to ditch controlling the state of the modal inside your state config.

相反，我会添加某种root或抽象状态，然后追踪模式是否打开那里。然后，您可以使用这里显示事件控制器之间的通信。注：有性能问题与听 $ rootScope 的C>，所以一定要研究的。但是（有人随时纠正我），这里的执行没有这些问题，因为 AppCtrl 永远不会被破坏。

Instead, I would add some sort of root or abstract state, and then track whether the modal is open there. Then, you can communicate between controllers using events as shown here. Note: There are performance implications with listening to $rootScope, so be sure to research those. However (someone feel free to correct me), the implementation here doesn't have those problems, because the AppCtrl is never destroyed.

原来这是一个pretty普遍使用的情况下，核心贡献者UI路由器之一，保持一个插件/添加所谓的 UI路由器额外

Turns out this is a pretty popular use case, and one of the core contributors to UI Router maintains a plugin/addition called UI Router Extras

它还包括延迟加载，被称为未来的国家，这是非常有用的工具。

It also includes utilities for lazy loading, called "Future States" which are very helpful.

话虽这么说，一个特点，我希望能得到上班时间上维护所有国家在URL中（或者，本地存储），并允许重复使用的状态组件。后者是在UI路由器的发展以及

That being said, one feature I'm hoping to get time to work on is maintaining all state within the URL (or perhaps, local storage) and allowing for reusable state "components". The latter is in the UI Router roadmap as well.

这篇关于棱角分明的UI路由器得到两种状态活跃在并行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！