I want to share data stored in variable from one controller to another

Question

I have data in one controller and now I want to share it with another but both controller has different modules. I have used $rootscope but it didn't work. I have used service it also didn't work. link here Service

Is there any other way to do. I have spent one week for this please help me.

toolbar.controler

(function ()
{
'use strict';

 angular
.module('app.toolbar')
.controller('ToolbarController', ToolbarController);


function ToolbarController($rootScope, $mdSidenav, msNavFoldService, $translate, $mdToast, $location, $localStorage, $http,  $scope)
{
   var vm = this;

   vm.name = $localStorage.name;
   vm.userId = $localStorage._id;

   vm.readNotifications = function(notifId){
      $http({
           url: 'http://192.168.2.8:7200/api/readNotification',
           method: 'POST',
           data: {notificationId: notifId,  userId: vm.userId}
       }).then(function(res){
          vm.rslt = res.data.result1;
          console.log(vm.rslt);
          vm.refresh();
          $location.path('/sharedwishlistdetails');
        }, function(error){
           alert(error.data);
        })
     }
  }
  })();

The data stored here in vm.reslt.

toolbar.module.js

(function ()
{
'use strict';

angular
    .module('app.toolbar', [])
    .config(config);

/** @ngInject */
function config($stateProvider, $translatePartialLoaderProvider)
{
    $translatePartialLoaderProvider.addPart('app/toolbar');  
}
})();

Now I want that result for this controller.

sharedwishlistdetails.controller.js

(function ()
{
'use strict';

angular
    .module('app.sharedwishlistdetails')
    .controller('SharedWishlistDetailsController', SharedWishlistDetailsController);

/** @ngInject */
//NotificationsController.$inject = ['$http', '$location'];
function SharedWishlistDetailsController($http, $location, $localStorage, $rootScope, $scope)
{
    var vm = this;
    vm.uid = $localStorage._id;

}
})();

shareddata.service.js

(function ()
{
'use strict';

angular
    .module('app.core')
    .factory('shareData', shareDataService);

/** @ngInject */
function shareDataService($resource,$http) {
     var shareData = {};


    return shareData;
}
})();

You have two ways to do so: 1. Using a service/factory which is a singleton. 2. $rootScope — Asher, Sep 15 '16 at 06:16
Use service http://stackoverflow.com/questions/26594140/how-to-share-data-between-two-modules-in-angularjs — AB Udhay, Sep 15 '16 at 06:16
check my answer [here](http://stackoverflow.com/questions/39485747/getting-data-from-another-angularjs-controller/39486078#39486078) hope you got what you were looking for — Mukul Jain, Sep 15 '16 at 06:23

Disha · Accepted Answer · 2016-09-15T12:53:09.837

1

write a service in 'app.toolbar' module

 angular.module('app.toolbar').service('ServiceA', function() {
     this.getValue = function() {
         return this.myValue;
     };

     this.setValue = function(newValue) {
          this.myValue = newValue;
     }
  });

In your toolbarController , inject ServiceA and set data -

    vm.readNotifications = function(notifId){
    $http({
       url: 'http://192.168.2.8:7200/api/readNotification',
       method: 'POST',
       data: {notificationId: notifId,  userId: vm.userId}
     }).then(function(res){
      vm.rslt = res.data.result1;
      ServiceA.setValue(vm.rslt);
      console.log(vm.rslt);
      vm.refresh();
      $location.path('/sharedwishlistdetails');
     }, function(error){
       alert(error.data);
     })
    }

Now write another service for 'app.sharedwishlistdetails' module -

   angular.module('app.sharedwishlistdetails',['app.toolbar']).service('ServiceB', function(ServiceA) {
     this.getValue = function() {
     return ServiceA.getValue();
   };

   this.setValue = function() {
     ServiceA.setValue('New value');
   }
   });

Now inject ServiceB in your SharedWishlistDetailsController controller and access data -

  var sharedData = ServiceB.getValue();

edited Sep 15 '16 at 12:53

answered Sep 15 '16 at 07:11

Disha

822
1
10
39

can i create two service for this – Kevin Sep 15 '16 at 07:29
here there are two different services in two different modules .. just to share data between two modules – Disha Sep 15 '16 at 07:40
I am totally confused. How to do in my case – Kevin Sep 15 '16 at 09:50
I have included as you told but in second controller it gives result `undefined`. – Kevin Sep 15 '16 at 12:20
I have again updated answer.. Inject first modules reference in your second module – Disha Sep 15 '16 at 12:53

score 0 · Answer 2 · answered Sep 15 '16 at 06:31

How could $rootScope failed in your code it would be appreciated if you paste your code: never mind here is an example that will help you out:

All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive. The rootScope is available in the entire application.If a variable has the same name in both the current scope and in the rootScope, the application use the one in the current scope.

angular.module('myApp', [])
 .run(function($rootScope) {
    $rootScope.test = new Date();
 })

.controller('myCtrl', function($scope, $rootScope) {
   $scope.change = function() {
      $scope.test = new Date();
   };

 $scope.getOrig = function() {
   return $rootScope.test;
 };
})

.controller('myCtrl2', function($scope, $rootScope) {
    $scope.change = function() {
       $scope.test = new Date();
    };

 $scope.changeRs = function() {
    $rootScope.test = new Date();
 };

 $scope.getOrig = function() {
    return $rootScope.test;
 };

});

thats what i have told, it would be appreciated if you could edit and paste your controller — md-5h04I3, Sep 15 '16 at 06:44

I want to share data stored in variable from one controller to another

toolbar.controler

toolbar.module.js

sharedwishlistdetails.controller.js

shareddata.service.js

2 Answers2