Share Variable between controllers of different routes - AngularJS

Question

I'm new on Angularjs and I'm trying to build my first application. Let's say I have to routes that loads two different views:

127.0.0.1:8080/site
127.0.0.1:8080/site_details

Maybe having two different routes is not the right procedure but that it is another problem.

I have two controllers: Controller 1:

app.controller('controller_1', function($scope, $http, user) {
          user.set('Test Example')
});

and Controller 2

app.controller('controller_2', function($scope, $http, user) {
        var xxx = user.get()
});

What I want to do is to share data between these two controllers. To do that I did a service in this way:

app.factory('user', function($rootScope) {
 var savedData = {}

 function set(data) {
   savedData = data;
 }
 function get() {
  return savedData;
 }

 return {
  set: set,
  get: get
 }

});

By looking around it seems that having a service built like this should solve the problem. However, what I obtain with the function get() in controller 2 is always an empty return. By setting breakpoints I can see that both set() and get() functions enters in their respective function in the service.

Is this a correct procedure to share data between controllers belonging of different routes?

EDIT1 The two views are built in the same ways and the are loaded inside ng-view

<html ng-app="app" ng-controller='controller_1'>
        CONTROLLER 1
</html>

Are you doing anything that might cause the service to get reloaded? I.e. refreshing the page. To be sure, the best way would be to add a link to the view from controller_1 to controller_2 — BShaps, Feb 28 '18 at 00:52
Actually the two views are very basic. Please refer to the edit question. They are loaded inside ng-view. So, i'm going to check if the service get reloaded in some way. — Thomas, Feb 28 '18 at 01:06

I. Ahmed · Answer 1 · 2018-02-28T05:15:14.850

The problem occurs because, controller_1 was not created before the creation of controller_2. You can modify the controller_2 to introduce some delay using $timeout:

app.controller('controller_2', function($scope, $timeout, $http, user) {
    // The time out is added to check your code working,
    // You can replace the code or can use, its up to your requirement
    $timeout(function(){    
        var xxx = user.get();
        console.log(xxx);
    }, 500);
});

Using $timeout will allow some time for creation of controller_1.

Also instantiate the controller_2:

<html ng-app="app">
  <body> 
     ........ 
    <div ng-controller='controller_1'>
       <div ng-controller='controller_2'>
       </div> 
    </div>
  </body> 
</html>

score 0 · Answer 2 · answered Feb 28 '18 at 02:39

First, sharing data between a service is a correct approach.

In your case, you need to ensure the order of getting data is after setting data. Using a $timeout is not a good approach, i think there should be another way, it depend on your detail code.

If your data is set after some event, you just need to pay attention to the order sequence like 'get after data has been set'

If you have to set data in initialization of controller_1, and controller_2 is sibling of controller_1, you can put the initialization logic of user data before bother controller_1 and controller_2 is entered.

score 0 · Answer 3 · answered Feb 28 '18 at 04:03

0

I think you had giving factory reference to both html where first and second controller you given have. in that case you have to give factory referee to main single page where your also loading sub pages(where you kept ng-view)

answered Feb 28 '18 at 04:03

Arun

450
3
8

score 0 · Answer 4 · answered Mar 27 '18 at 12:27

You can use rootscope like below.

app.controller('controller_1', function($scope, $http, $rootScope) {
      $rootScope.UserInfo ="Test Example";
});

 app.controller('controller_2', function($scope, $http, $rootScope) {
    var xxx = $rootScope.UserInfo;
    console.log(xxx)
});

Share Variable between controllers of different routes - AngularJS

4 Answers4