Maintain model of scope when changing between views in AngularJS

Question

I am learning AngularJS  Let s say I have  view1 using My1Ctrl  and  view2 using My2Ctrl  that can be navigated to using tabs where each view has its own simple  but different form    How would I make sure that the values entered in the form of view1 are not reset  when a user leaves and then returns to view1     What I mean is  how can the second visit to view1 keep the exact same state of the model as I left it

User · Answer

Angular doesn t really provide what you are looking for out of the box  What i would do to accomplish what you re after is use the following add ons   UI Router  amp  UI Router Extras  These two will provide you with state based routing and sticky states  you can tab between states and all information will be saved as the scope  stays alive  so to speak   Check the documentation on both as it s pretty straight forward  ui router extras also has a good demonstration of how sticky states works

User · Answer

I took a bit of time to work out what is the best way of doing this  I also wanted to keep the state  when the user leaves the page and then presses the back button  to get back to the old page  and not just put all my data into the rootscope   The final result is to have a service for each controller   In the controller  you just have functions and variables that you dont care about  if they are cleared   The service for the controller is injected by dependency injection  As services are singletons  their data is not destroyed like the data in the controller   In the service  I have a model   the model ONLY has data - no functions -  That way it can be converted back and forth from JSON to persist it   I used the html5 localstorage for persistence   Lastly i used window onbeforeunload and  rootScope  broadcast  saveState    to let all the services know that they should save their state  and  rootScope  broadcast  restoreState   to let them know to restore their state   used for when the user leaves the page and presses the back button to return to the page respectively    Example service called userService for my userController    app factory  userService      rootScope   function   rootScope         var service              model                name                  email                         SaveState  function                  sessionStorage userService   angular toJson service model                       RestoreState  function                  service model   angular fromJson sessionStorage userService                         rootScope  on  savestate   service SaveState        rootScope  on  restorestate   service RestoreState        return service         userController example  function userCtrl  scope  userService         scope user   userService      The view then uses binding like this   lt h1 gt   user model name   lt  h1 gt    And in the app module  within the run function i handle the broadcasting of the saveState and restoreState   rootScope  on   routeChangeStart   function  event  next  current        if  sessionStorage restorestate     true              rootScope  broadcast  restorestate      let everything know we need to restore state         sessionStorage restorestate   false               let everthing know that we need to save state now  window onbeforeunload   function  event         rootScope  broadcast  savestate         As i mentioned this took a while to come to this point   It is a very clean way of doing it  but it is a fair bit of engineering to do something that i would suspect is a very common issue when developing in Angular   I would love to see easier  but as clean ways to handle keeping state across controllers  including when the user leaves and returns to the page

User · Answer

I had the same problem  This is what I did  I have a SPA with multiple views in the same page  without ajax   so this is the code of the module   var app   angular module  otisApp     chieffancypants loadingBar    ngRoute      app config    routeProvider   function  routeProvider        routeProvider when    page             templateUrl  function page  return page page     html             controller  otisCtrl              otherwise  redirectTo   otis            I have only one controller for all views  but  the problem is the same as the question  the controller always refresh data  in order to avoid this behavior I did what people suggest above and I created a service for that purpose  then pass it to the controller as follows   app factory  otisService   function  http       var service                         answers                                    return service       app controller  otisCtrl      scope     window    otisService     routeParams     function  scope   window  otisService   routeParams                scope message    Hello from page       routeParams page       scope update   function answer           otisService answers push answers                         Now I can call the update function from any of my views  pass values and update my model  I haven t  no needed to use html5 apis for persistence data  this is in my case  maybe in other cases would be necessary to use  html5 apis like localstorage and other stuff

User · Answer

rootScope is a big global variable  which is fine for one-off things  or small apps  Use a service if you want to encapsulate your model and or behavior  and possibly reuse it elsewhere    In addition to the google group post the OP mentioned  see also https   groups google com d topic angular eegk lB6kVs discussion

User · Answer

You can use  locationChangeStart event to store the previous value in  rootScope or in a service  When you come back  just initialize all previously stored values  Here is a quick demo using  rootScope      x000D   x000D  var app   angular module  myApp     ngRoute     x000D  app controller  tab1Ctrl   function  scope   rootScope    x000D      if   rootScope savedScopes    x000D          for  key in  rootScope savedScopes    x000D               scope key     rootScope savedScopes key   x000D            x000D        x000D       scope  on   locationChangeStart   function event  next  current    x000D           rootScope savedScopes     x000D              name   scope name  x000D              age   scope age x000D             x000D          x000D      x000D  app controller  tab2Ctrl   function  scope    x000D       scope language    English   x000D      x000D  app config function  routeProvider    x000D       routeProvider x000D           when        x000D              template    lt h2 gt Tab1 content lt  h2 gt Name   lt input ng-model  name   gt  lt br  gt  lt br  gt Age   lt input type  number  ng-model  age    gt  lt h4 style  color  red  gt Fill the details and click on Tab2 lt  h4 gt    x000D              controller   tab1Ctrl  x000D             x000D           when   tab2     x000D              template    lt h2 gt Tab2 content lt  h2 gt  My language    language   lt h4 style  color  red  gt Now go back to Tab1 lt  h4 gt    x000D              controller   tab2Ctrl  x000D              x000D      x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 6 9 angular min js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 6 9 angular-route js  gt  lt  script gt  x000D   lt body ng-app  myApp  gt  x000D       lt a href       gt Tab1 lt  a gt  x000D       lt a href    tab2  gt Tab2 lt  a gt  x000D       lt div ng-view gt  lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

A bit late for an answer but just updated fiddle with some best practice  jsfiddle  var myApp   angular module  myApp       myApp factory  UserService   function         var userService            userService name    HI Atul        userService ChangeName   function  value            userService name   value              return userService       function MyCtrl  scope  UserService         scope name   UserService name       scope updatedname          scope changeName function data            scope updateServiceName data              scope updateServiceName   function name           UserService ChangeName name            scope name   UserService name

User · Answer

An alternative to services is to use the value store    In the base of my app I added this  var agentApp   angular module  rbAgent     ui router    rbApp tryGoal    rbApp tryGoal service    ui bootstrap      agentApp value  agentMemory                 contextId              sessionId                    And then in my controller I just reference the value store  I don t think it holds thing if the user closes the browser   angular module  rbAgent    controller  AgentGoalListController     agentMemory     scope     rootScope    config     state   function agentMemory   scope   rootScope  config   state     scope config   config   scope contextId   agentMemory contextId

User · Answer

Solution that will work for multiple scopes and multiple variables within those scopes  This service was based off of Anton s answer  but is more extensible and will work across multiple scopes and allows the selection of multiple scope variables in the same scope  It uses the route path to index each scope  and then the scope variable names to index one level deeper   Create service with this code   angular module  restoreScope       factory  restoreScope      rootScope     route   function   rootScope   route         var getOrRegisterScopeVariable   function  scope  name  defaultValue  storedScope            if  storedScope name     null                storedScope name    defaultValue                    scope name    storedScope name              var service              GetOrRegisterScopeVariables  function  names  defaultValues                var scope    route current locals  scope              var storedBaseScope   angular fromJson sessionStorage restoreScope               if  storedBaseScope    null                    storedBaseScope                                    stored scope is indexed by route name             var storedScope   storedBaseScope  route current   route originalPath               if  storedScope    null                    storedScope                                 if  typeof names      string                     getOrRegisterScopeVariable scope  names  defaultValues  storedScope                 else if  Array isArray names                     angular forEach names  function  name  i                        getOrRegisterScopeVariable scope  name  defaultValues i   storedScope                                     else                   console error  First argument to GetOrRegisterScopeVariables is not a string or array                                 save stored scope back off             storedBaseScope  route current   route originalPath    storedScope              sessionStorage restoreScope   angular toJson storedBaseScope                       SaveState  function                     get current scope             var scope    route current locals  scope              var storedBaseScope   angular fromJson sessionStorage restoreScope                   save off scope based on registered indexes             angular forEach storedBaseScope  route current   route originalPath   function  item  i                    storedBaseScope  route current   route originalPath  i    scope i                                sessionStorage restoreScope   angular toJson storedBaseScope                         rootScope  on  savestate   service SaveState        return service         Add this code to your run function in your app module    rootScope  on   locationChangeStart   function  event  next  current         rootScope  broadcast  savestate         window onbeforeunload   function  event         rootScope  broadcast  savestate         Inject the restoreScope service into your controller  example below    function My1Ctrl  scope  restoreScope        restoreScope GetOrRegisterScopeVariables               scope variable name s           user            anotherUser                     default value s            name   user name   email   user website com               name   another user name   email   anotherUser website com                The above example will initialize  scope user to the stored value  otherwise will default to the provided value and save that off  If the page is closed  refreshed  or the route is changed  the current values of all registered scope variables will be saved off  and will be restored the next time the route page is visited

[javascript] Maintain model of scope when changing between views in AngularJS

Examples related to javascript

Examples related to angularjs