Angularjs, passing scope between routes

Erik Honn picture Erik Honn · Dec 14, 2012 · Viewed 68.6k times · Source

I have a situation with a form that stretches over several pages (might not be ideal, but that is how it is). I'd like to have one scope for the entire form that gets filled in as you go along, so that if the user goes back and forth between steps it's easy to remember the state.

So I need to do, in very-pseudo-code:

  1. Set $scope.val = <Some dynamic data>
  2. Click a link and be routed to a new template (probably with the same controller).
  3. $scope.val should still be the same value as it was on the last page.

Is somehow persisting data for the scope the right way to go about this, or is there some other way? Can you even create a controller that has a persisted scope between routes, except for saving it in a database of course.

Answer

ganaraj picture ganaraj · Dec 14, 2012

You need to use a service since a service will persist throughout your app's life.

Lets say you want to save data pertaining to a user

This is how you define the service :

app.factory("user",function(){
        return {};
});

In your first controller:

app.controller( "RegistrationPage1Controller",function($scope,user){
    $scope.user = user;
    // and then set values on the object
    $scope.user.firstname = "John";
    $scope.user.secondname = "Smith";
});

app.controller( "RegistrationSecondPageController",function($scope,user){
        $scope.user = user;
        // and then set values on the object
        $scope.user.address = "1, Mars";

    });