Best way to pass variables between controllers

Question

I am using three Angular controllers:

**Controller1**

var fetchStudentDetails = function(){
    var sDetails = myService.getList(//url-1 here);
    sDetails.then(function (data) {
            $scope.studentData = data.list;
            var studentId = $scope.studentData[0].id;
    });
}
fetchStudentDetails();
$scope.loadSecondLevel = function(){
                $state.go('secondLevel');               
              }


**Controller2**

    var fetchClassDetails = function(){
    var sDetails = myService.getList(//url-2 here);
    sDetails.then(function (data) {
            $scope.classData = data.list;
            var className = $scope.classData[0].name;
    });
    }
    fetchClassDetails();
    $scope.loadThirdLevel = function(){
        $state.go('thirdLevel');                
    }

**Controller3**

   $scope.putStudentDetails = function(){
   // Here I need studentId,className for updateResource
        var sDetails = myService.updateResource(//url-3 here);
        sDetails.then(function (data) {

        });     
    }

Where I have to pass studentId (in Controller1), className (in Controller2) into a function which in Controller3. I tried with $rootScope, it is working but when refresh the page $rootScope values become empty. Does anyone know how to do this?

Sounds like you're looking for [services](https://docs.angularjs.org/guide/services) — Ankh, May 06 '16 at 14:38
If you refresh page the data will obviously go, that's how Single Page Applications (SPA) works. @Ankh is right. Services can be used. If you want to persist data you can try SessionStorage or LocalStorage of the browser but that obviously has limitations — Coder John, May 06 '16 at 14:40
If you refresh the page then you need to store the values in the [localStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) and as @Ankh commented - During the runtime of the app you should use service/factory (or both) — Alon Eitan, May 06 '16 at 14:40
Possible duplicate of [Passing data between controllers in Angular JS?](http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js) — ajmajmajma, May 06 '16 at 15:32

score 1 · Answer 1 · answered May 06 '16 at 16:13

Your question could be split into two aspects:

1. How to share data between controllers
The best practice to share data in Angular 1.x is using factory, store the shared data in a factory service, and expose access methods to controllers:

factory('DetailData', function(myService, $q){

     var _details;

     function __getDetailData(){
           return details
     }

     function __setDetailData(){
          return myService.getList().then(function(data){
              _details = data;
          })
     }

     return {
         getDetailData: __getDetailData,
         setDetailData: __setDetailData
     }

})


controller('myContrller', function(DetailData, $scope){
    $scope.data = DetailData.getDetailData();
})

2. How to persist data when page refreshed,
you can use localStorage to keep data persistent during page reloading, many tools & libraries can achieve this, for example ngStorage, or you could reset the data from server every time your angular application started:

//this would register work which would be performed 
//when app finish loading and ready to start. 
angular.module('app').run(function(DetailData){

    DetailData.setDetailData();

})

Alex Polymath · Answer 2 · 2016-05-06T14:43:42.530

0

Depending on what problem you are solving. There are three options:

Is to save data to $rootScope
Is to use $scope.$emit & $scope.$on functions.
Use a custom Service to store the data

And if you need to save data, so it was available after full page reload - localStorage.

edited May 06 '16 at 14:43

answered May 06 '16 at 14:39

Alex Polymath

185
1
11

7

the use of `$rootScope` is discouraged and almost always avoidable. – Seth May 06 '16 at 14:41
2

I will not downvote this answer, because you can use `$rootScope` but as @Seth commented - You should avoid it, it's a bad practice (Use a service instead) – Alon Eitan May 06 '16 at 14:43

score 0 · Answer 3 · edited May 23 '17 at 12:31

0

Hey this question are responded in Passing data between controllers in Angular JS?

But the simple response is in the services.

edited May 23 '17 at 12:31

Community

1
1

answered May 06 '16 at 15:06

jorgeucano

11
4

1

Flag as duplicate instead of posting as answer. – ajmajmajma May 06 '16 at 15:32

Best way to pass variables between controllers

3 Answers3