在两个控制器 angularjs 之间共享数据

Question

我似乎面临着在angularjs中在控制器之间共享数据的问题 我有两个 HTML 文件，每个文件一个控制器，一个用于共享信息的服务和一个用于路由的常规应用程序文件。

这是第一个文件

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

这是它的相应控制器：

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

这是第二个HTML文件：(infoView.html)

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

这是它的相应控制器：

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

以下是共享信息的服务：

angular.module('prkApp').factory('shareInfoService',
['$rootScope',
function ($rootScope) {
//Return the particular function
return ({
sendData: sendData
});
function sendData(data)
{
$rootScope.$broadcast('sendTheData', data);
};
}]);

当我单击第一个HTML文件中的按钮时，位置将更改为infoView，并调用shareInfoService.broadcastData函数。

它重定向到第二个 HTML 文件。但是，此页面上显示的信息是"您好"而不是"好的"。

Web 控制台日志显示 {信息："好的"} 首先，紧接着"你好"。

如何纠正它以显示由以前的控制器发送的数据？

Answer 1

您在更改位置之前发送广播，以便在广播事件时不会加载infoController中的侦听器。您可以将值存储在服务中，然后在加载时infoController检索它，而不是广播。

服务

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

控制器

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