Angularjs, passing scope between routes

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

    });

Solution 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.

Solution 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.