Angular UI Router - How to preserve views while switching views

问题

I am I new to Angular and UI Router.

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

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.

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.

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.

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.

回答1:

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.

Read the conversation here: https://github.com/angular-ui/ui-router/issues/894

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

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

回答2:

One option would be to implement a service that can be used to maintain the previous state. Services persist over controller changes, thus they can be used to maintain the previous page state and updated when the route changes. something similar to this would work.

app.factory('persitDataService', [function(currentStateData){
  var stateService = {
     state:{
        //your object data set to passed in data
     }
     //other functions here
  }; 
  return stateService   
});

then in the controllers just inject the service and assign to a scope value. When the route changes just reset the data in service to new state and inject into new controller

This should work for the previous page state. If you are wanting to save the states of all previous pages then this becomes a larger problem but should be accomplished in much the same way only with a more complicated service setup. This could also be combined with local and session storage

来源：https://stackoverflow.com/questions/23837851/angular-ui-router-how-to-preserve-views-while-switching-views