Angular UI Router - 如何在切换视图时保留视图 [英] Angular UI Router - How to preserve views while switching views

问题描述

我是 Angular 和 UI Router 的新手.

I am I new to Angular and UI Router.

Plunk http://plnkr.co/edit/1wfyrGryfGG5RtXozPFY?p=预览

设置 我有三个顶级应用程序导航按钮主页、项目、帮助.他们使用 Angular UI Router ui-view 指令加载不同的视图 home.html、projects.html 和 help.html.这很好用.

Setup I have three top level application nav buttons Home, Projects, Help. They load different views home.html, projects.html and help.html using the Angular UI Router ui-view directive. This works good.

Projects.html 视图有一个标签栏，每个标签对应一个项目:D1、D2、D3 等，我使用 url 路由器属性显示相应的项目标签.

The Projects.html view has a tab bar with each tab corresponding to a project: D1, D2 D3 etc., I show the corresponding project tab using url router attributes.

每次我单击项目"按钮时，它都会完全重新加载选项卡栏.我丢失了当前选项卡，希望其中是否有任何嵌套视图.基本上是 Project.html 的页面内容，也调用控制器.

Every time I click the Projects button it is reloading the tab bar completely. I loswe the current tab and hopefully if any nested views inside it. Basically the page contents of Project.html, invoking the controller as well.

我通读了 wiki 文档，但无法弄清楚如何实现我所需的功能.我确定我错过了一些东西.它会总是重新加载视图吗?

I read through the wiki documents and couldnt figure out how to implement my required functionality. I am sure I am missing something. Will it always reload the view?

问题: 如何避免重新加载项目视图内容，以便我可以在切换到主页之前按原样保留所选选项卡和所有内容.因为每个项目我都会有很多嵌套的视图和模型.

Question: How to avoid reloading the projects view contents so that I can retain the selected tab and all the contents as-is before switching to Home. Because I would have a lot of nested views and models on each project.

推荐答案

我也想要类似的功能，但是 ui-router 还不支持.我 fork ui-router 支持并行状态"并提交给项目征求意见.谈话的要点是 ui-router 最终将支持某种形式的并行状态，但目前还没有.同时，您可以尝试我的 0.2.10 分支，它提供了您想要的并行状态.

I wanted similar functionality too, but ui-router doesn't yet support it. I forked ui-router to support "parallel states" and submitted it to the project for comment. The gist of the conversation is that ui-router will eventually support some form of parallel states but not yet. In the meantime, you can try my fork of 0.2.10 which provides the parallel states that you want.

在此处阅读对话:https://github.com/angular-ui/ui-router/issues/894

在此处查看示例并行选项卡:http://plnkr.co/edit/YhQyPV?p=预览

View the sample parallel tabs plunk here: http://plnkr.co/edit/YhQyPV?p=preview

这是叉子；用 grunt 构建它:https://github.com/christopherthielen/ui-router

Here is the fork; build it with grunt: https://github.com/christopherthielen/ui-router

这篇关于Angular UI Router - 如何在切换视图时保留视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！