Sharing data between two controllers angularjs

Question

I seem to be facing a problem with sharing data between controllers in angularjs I have two HTML files, one controller for each of them, a service to share Information and a regular app file for routing.

Here's the first file

<div class="container">
<button ng-click="broadcastData()"> Send  </button> </div>

Here's the corresponding Controller for it:

angular.module('myApp').controller('sendInfoController',
 ['$scope','$rootScope','$location'
  function ($scope,$rootScope, $location) 
{
    $scope.broadcastData=function()
    {
        shareInfoService.sendData({info: "Okay"});
        $location.path('/infoView');
    }
}]);

Here's the second HTML File: (infoView.html)

<div>
 {{data}}
</div>

Here's the corresponding controller for it:

angular.module('myApp').controller('infoController',
 ['$scope','$rootScope',
function ($scope,$rootScope) 
 {
    $scope.data="hello";
    $rootScope.$on('sendTheData', function(event,args)
    {
            console.log(args);
            $scope.data=args.info;
    });
    console.log($scope.data);
}]);

Here's the service to share information:

angular.module('prkApp').factory('shareInfoService',
  ['$rootScope',
 function ($rootScope) {

//Return the particular function
return ({
  sendData: sendData
});

function sendData(data)
{
    $rootScope.$broadcast('sendTheData', data);
};
}]);

When I click on the button in the first HTML File, the location gets changed to infoView and the shareInfoService.broadcastData function gets called.

It redirects to the second HTML File. However, the information that is displayed on this page is "hello" and not "Okay".

The web console logs shows {info: "Okay"} first and "hello" immediately after that.

How can it be rectified so as to show the data that is sent by the previous controller?

Are you getting any error in console? You have not injected your service to the first controller and your service is defined on a different App — Vivz
– Vivz, Commented Jun 27, 2017 at 13:57
Are you using the same App or you want to share data between two different angular applications? — Vivz
– Vivz, Commented Jun 27, 2017 at 14:01

machinehead115 · Accepted Answer · 2017-06-27 14:31:56Z

You are sending out the broadcast before you change the location so the listener in the infoController will not be loaded when the event is broadcasted. Instead of broadcasting, you can store the value in the service and then have infoController retrieve it when it loads.

Service

angular.module('prkApp').factory('shareInfoService', ['$rootScope', function($rootScope) {
    var data;

    //Return the particular function
    return ({
      sendData: sendData,
      getData: getData
    });

    function sendData(new_data) {
      data = new_data;
    };

    function getData() {
      return data;
    }
  }
]);

Controller

angular.module('myApp').controller('infoController', ['$scope', '$rootScope', function($scope, $rootScope) {
    $scope.data = "hello";
    console.log($scope.data);
    $scope.data = shareInfoService.getData();
    console.log($scope.data);
  }
]);

Hey, while this seems to be working, when I refresh the second HTML page. (the one that receives the information), I get "Hello" and "undefined "in the browser console. Also, the HTML page shows nothing. Any way to work around this such that the information doesn't disappear when I refresh the page?

Collectives™ on Stack Overflow

Sharing data between two controllers angularjs

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related