Angularjs, passing scope between routes

Question

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 1

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";

    });

Answer 2

The service will work, but a logical way to do it using only ordinary scopes and controllers is to set up your controllers and elements so that it reflects the structure of your model. In particular, you need a parent element and controller that establish a parent scope. The individual pages of the form should reside in a view that is a child to the parent. The parent scope persists even as the child view is updated.

I assume you're using ui-router so you can have nested named views. Then in pseudo-code:

<div ng-controller="WizardController">
  <div name="stepView" ui-view/>
</div>

Then WizardController defines the scope variables that you want to preserve across the steps of the multi-page form (which I'm referring to as a "wizard"). Then your routes will update stepView only. Each step can have its own templates, controllers and scopes, but their scopes are lost from page to page. But the scopes in WizardController are preserved across all pages.

To update the WizardController scopes from the child controllers, you'll need to use syntax like $scope.$parent.myProp = 'value' or define a function setMyProp on WizardController for each scope variable. Otherwise, if you try to set the parent scope variables directly from the child controllers, you'll end up just creating a new scope variable on the child itself, shadowing the parent variable.

Kind of hard to explain and I apologize for the lack of a full example. Basically you want a parent controller that establishes a parent scope, which will be preserved across all pages of your form.

Answer 3

The data can be passed between controllers through two ways

1. $rootScope
2. Model

The sample below demonstrates the passing of values using the model

app.js

angular.module('testApp')
  .controller('Controller', Controller)
  .controller('ControllerTwo', ControllerTwo)
  .factory('SharedService', SharedService);

SharedService.js

function SharedService($rootScope){

 return{
    objA: "value1",
    objB: "value2"
  }
}

//Modify the value in controller A

Controller.js

function Controller($scope, SharedService){

 $scope.SharedService = SharedService;

 $scope.SharedService.objA = "value1 modified";
}

//Access the value in controllertwo

ControllerTwo.js

function ControllerTwo($scope, SharedService){

 $scope.SharedService = SharedService;

 console.log("$scope.SharedService.objA"+$scope.SharedService.objA); // Prints "value1 modified"
}

Hope this helps.