AngularJS saving state of tabs when navigating between them

[Jayanth]

Hi,

I am new to AngularJS and I have a question.

I want to make something similar to this http://plnkr.co/edit/IZiEskpyprh3vt9TTUNd?p=preview

Basically I have 3 tabs . The only change from the above example is that each of my tab might contain forms with input elements and assume there are controllers for each tab viz. Tab1Controller, Tab2Controller, Tab3Controller.

Say my sequence of interaction with the app is 

Tab1 --->  Enter some values in the form

Goto Tab2

Tab2 --->  Enter some values in the form

Goto Tab1 again

Now when I go back to Tab1 again from Tab2 I want the values I typed in Tab1 (before navigating) to be restored.

One solution I can think of is create a service that will store the contents of Tab1 which I can restore while loading it again...But the problem is when will I call the updateModel() function which will update the service....To be more precise on loading of controller I can do something like 

                         $scope.userData = UserService.getModel();

and in the template I can bind as 

                        <input type = "text"  ng-model = "userData.name">

                        <input type = "number"  ng-model = "userData.age">

But when i switch to Tab2 I need to store/update the UserService Model with the contents entered in the form....My question is where will call that update.....???

I have this question because the logic for switching between the tabs is basically in "mainController"...So if at all I have to call updateModel() the place to do it is logically somewhere within the following code.....

                        $scope.go = function(route){

         $state.go(route);

        };

But how can I access the values ($scope.userData) present in Tab1Controller in mainController....

One way of doing this can be I can have an ng-change event attached to each form element and everytime a value is entered I can call a function that basically calls UserService.updateModel($scope.userData)...But I think this will be a naive solution.....

Any help will be much appreciated....Thanks...!!!

[Sander Elias]

Hi Jayanth,

In this case the best solution is to put your model (userData) inside a service that you inject in every view.

you then can navigate wherever you want, without losing the user input.

Regards

Sander

[jayanth veera]

Hi Sander ,

I can have the service injected in all the views....But how will I save / update the value of $scope.userData in mainController....??

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Jayanth,

If you build a small plunk, out of the one you provided before, I can show you in your own code how to do just that.

Basically, if you keep your model in a service, you just hook up the model directly to the view. There is no

loading/saving, as there is just 1 model displayed on different places.

Regards

Sander

[jayanth veera]

Oh ok...Thanks a lot Sander....I understood your point and got it working....

--