Freigeben von Daten zwischen zwei Controllern angularjs

Question

Ich habe ein Problem mit der Freigabe von Daten zwischen den Controllern in angularjs Ich habe zwei HTML-Dateien, einen Controller für jeden von ihnen, einen Dienst Informationen zu teilen und eine normale App-Datei für das Routing.

Hier ist die erste Datei

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

Hier der entsprechende Regler ist für sie:

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

Hier ist die zweite HTML-Datei: (infoView.html)

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

Hier ist die entsprechende Controller dafür:

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

Hier ist der Service-Informationen zu teilen:

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

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

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

Als ich in der ersten HTML-Datei auf die Schaltfläche klicken, wird der Standort geändert Infoview und shareInfoService.broadcastData Funktion aufgerufen wird.

Es leitet an die zweite HTML-Datei um. Die Information, die auf dieser Seite angezeigt wird, ist jedoch "Hallo" und nicht "Okay".

Die Webkonsole Protokolle zeigt {Info: "Okay"} zuerst und "Hallo" sofort danach.

Wie kann es korrigiert werden, um die Daten anzuzeigen, die vom vorherigen Controller gesendet wurden?

Answer 1

Sie senden die Übertragung, bevor Sie den Standort ändern, damit der Listener in infoController nicht geladen wird, wenn das Ereignis gesendet wird. Anstatt zu senden, können Sie den Wert im Service speichern und dann infoController abrufen, wenn es geladen wird.

Dienst

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