AngularJS:两个平行视图,一个URL

时间:2014-04-19 04:39:55

标签: angularjs twitter-bootstrap-3 angular-ui-router angularjs-routing deep-linking

我正在构建一个仪表板/控制面板应用程序,它基本上由根级别的两个选项卡(引导程序)组成,称为“dispatch”和“admin”。每个选项卡都有自己的多层导航和功能,并且它们不需要直接相互交互。我遇到的问题是如何深入链接到其中一个选项卡中的子视图,而不会丢失非活动选项卡的“状态”。为了澄清,如果我不担心更新URL,我可以做到这一点,但是当我尝试添加深层链接时,那就是我被卡住了。

所需行为的一个例子:

  1. 当您点击“管理”标签时,路线将变为"/admin"
  2. 点击子导航项,路线变为"/admin/foo"
  3. 选择第3层子级别项目,路线变为"admin/foo/thing1"
  4. 点击“发送”标签,路线变为"/dispatch"
  5. 点击“管理”标签返回,路线返回"admin/foo/thing1"
  6. 所以基本上,如果你在填写文本字段的中间位于"admin/foo/thing1"路径,然后切换到另一个选项卡,然后切换回来,文本字段应该仍然在那里就像你离开它一样。

    就像我说的那样,问题不是从标签切换到标签,因为默认情况下标签只显示和隐藏页面上的内容而不动态重新加载任何视图。当你切换到它时,我只是不知道如何深度链接到给定标签的“书签”位置。我一直在想的方法是点击一个标签应该只更新网址的第一部分(/admin/dispatch),然后某种$ watch功能会更新剩余的部分在该选项卡中的最后一个“位置”。会有类似的工作吗?

    另外,我正在使用ui-router来处理我的所有路由和状态,因此我必须将其考虑到我将如何处理所需的行为。

    帮助?

2 个答案:

答案 0 :(得分:4)

我研究了这两个主题(深度状态重新激活和并行状态)并集成到ui-router中。抓住我的ui-router的github分支并使用grunt构建。然后,将两个标签状态标记为parallel: truedeepStateRedirect: true

Git repo:https://github.com/christopherthielen/ui-router

示例plunker:http://plnkr.co/edit/YhQyPV?p=preview

讨论:https://github.com/angular-ui/ui-router/issues/894

答案 1 :(得分:0)

我只是将当前状态保存在变量中,然后动态地将选项卡的链接更改为最后一个子视图。

例如,如果用户在/admin/billing,则“管理”标签会链接到admin/billing。当他们离开该标签时,/admin标签保持不变。如果您使用的是ui-router,则可以使用ui-sref来执行此操作。您还可以在状态更改时手动检查变量,并将用户从控制器路由到那里。