Kevin Kevin - 2 months ago 5
AngularJS Question

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

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;
}
})();

Answer

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();
Comments