AngularJS帮助使用$广播控制器之间的数据共享 [英] AngularJS help sharing data between controllers using $broadcast
问题描述
我一直试图在使用$广播和$，但我就是无法获得的数据在两个控制器之间移动。
I've been trying to use $broadcast and $on but I just can't get the data to move between the two controllers.
在我的主网页，我有一个按钮，每次的命中时间增加了4到VAR：
On my main webpage i have a button which adds 4 to a var each time it's hit:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="app">
<div ng-controller="mainCtrl">
<button ng-click="add(4)"> 4 </button>
</div>
<script src="../Scripts/angular.js"></script>
<script src="../assets/js/angular-grid.js"></script>
<script src="../assets/controller/gods_controller.js"></script>
<script src="../Scripts/angular-animate.js"></script>
</body>
</html>
在我mainCtrl我有函数add（）和使用$广播播出我的值：
In my mainCtrl I have the function add() and use $broadcast to broadcast my value:
var module = angular.module("app", ["angularGrid", "ngAnimate"])
module.controller("mainCtrl", function ($scope, $rootScope) {
var total = 0
$scope.add = function (x) {
total += x;
$rootScope.$broadcast('totalBroadcast', total)
}
});
然后我必须使用$上接收广播我的弹出第二个控制器：
Then I have a second controller for my popup using $on to receive the broadcast:
module.controller('popUpCtrl', function ($scope) {
$scope.$on('totalBroadcast', function(events, args){
$scope.total = args;
})
})
然后我的弹出HTML使用第二控制器和$ scope.total作为前pression：
Then my popup HTML uses the second controller and $scope.total as an expression:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="app">
<div ng-controller="popUpCtrl">
<p>The total is: {{total}}</p>
</div>
<script src="../Scripts/angular.js"></script>
<script src="../assets/js/angular-grid.js"></script>
<script src="../assets/controller/gods_controller.js"></script>
<script src="../Scripts/angular-animate.js"></script>
</body>
</html>
没有数据似乎传递给我的第二个控制器，前pression不显示任何东西。
No data seems to be passed to my second controller, the expression doesn't show anything at all.
修改
我一直在使用一个服务也试过，HTML的上方保持不变，但现在我已经添加了一个服务
I have also tried using a service, HTML's above remain the same but now I've added a service
module.factory('myService', function () {
var total = 0;
var setTotal = function (x) {
total = x;
}
var getTotal = function () {
return total;
};
return {
setTotal: setTotal,
getTotal: getTotal
}
});
我的主控制器和广告功能现在：
My main controller and ad function are now:
module.controller("mainCtrl", function ($scope, myService) {
var total = 0
$scope.add = function (x) {
myService.setTotal(x)
}
});
和我popupCtrl控制器现在是这样的：
and my popupCtrl controller is now this :
module.controller('popUpCtrl', function ($scope, myService) {
$scope.total = myService.getTotal();
})
{{总}}在我的弹出现在正在pssed为0VAR总在我的服务等于前$ P $。因此，该数据目前正在使用该服务的转移，而是由add（）函数现在责成setTotal（）方法而不是设置变种。我有我的注射服务作为一个依赖于两个控制器。
{{total}} in my popup is now being expressed as the "0" which var total is equal to in my service. So the data is now being transferred using the service, but the setTotal() method isn't setting the var as instructed by the add() function now. I have injected my service as a dependency to both controllers.
推荐答案
我没有找到一个解决我最初的问题，这是使用 localStorage.setItem（民，民）来将数据存储在浏览器中。看来这是专门开发共享标签/窗口之间的数据，因此通过 localStorage.getItem（民）。
I did find a solution to my initial question, which was to use localStorage.setItem("num", "num") to store the data in the browser. It seems this was developed specifically to share data between tabs/windows, and so is accessible via localStorage.getItem("num").
这回答我原来的问题，但是我现在想的总来进行动态更新。目前它在刷新时才会更新。任何提示将AP preciated。
This answers my original question, however I would now like the total to be updated dynamically. At the moment it is only updated upon refresh. Any tips would be appreciated.
编辑（解释以上）
通过在我的第二个弹出使用此事件侦听器 -
By using this event listener in my second popup -
window.addEventListener('storage', function (event) {
$scope.total = parseInt(event.newValue);
$scope.$apply();
});
我能够访问存储并将其绑定到我的HTML一个前pression。记住$ scope.apply承担（）这里需要调用，因为总的范围之外。
I was able to access the storage and bind it to an expression in my HTML. Bear in mind $scope.apply() needs to be called here because total is outside of the scope.
的更多细节 - <一个href=\"https://developer.apple.com/library/safari/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html\" rel=\"nofollow\">https://developer.apple.com/library/safari/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html
这篇关于AngularJS帮助使用$广播控制器之间的数据共享的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
