AngularJS помогает обмениваться данными между контроллерами, используя $ broadcast
Я пытался использовать $ broadcast и $ on, но я просто не могу заставить данные перемещаться между двумя контроллерами.
На моей главной веб-странице у меня есть кнопка, которая добавляет 4 к переменной при каждом нажатии:
<!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 () и использую $ broadcast для трансляции моего значения:
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)
}
});
Затем у меня есть второй контроллер для моего всплывающего окна, использующий $ on для получения трансляции:
module.controller('popUpCtrl', function ($scope) {
$scope.$on('totalBroadcast', function(events, args){
$scope.total = args;
})
})
Затем мой всплывающий HTML-код использует второй контроллер и $ scope.total в качестве выражения:
<!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>
Похоже, что данные не передаются моему второму контроллеру, выражение вообще ничего не показывает.
РЕДАКТИРОВАТЬ
Я также пытался использовать службу, HTML выше остается прежним, но теперь я добавил службу
module.factory('myService', function () {
var total = 0;
var setTotal = function (x) {
total = x;
}
var getTotal = function () {
return total;
};
return {
setTotal: setTotal,
getTotal: getTotal
}
});
Мой основной контроллер и рекламная функция теперь:
module.controller("mainCtrl", function ($scope, myService) {
var total = 0
$scope.add = function (x) {
myService.setTotal(x)
}
});
и мой контроллер popupCtrl теперь такой:
module.controller('popUpCtrl', function ($scope, myService) {
$scope.total = myService.getTotal();
})
{{total}} в моем всплывающем окне теперь выражается как "0", значение которого равно var total в моем сервисе. Таким образом, данные теперь передаются с использованием сервиса, но метод setTotal () не устанавливает переменную, как это предписано функцией add (). Я ввел свой сервис как зависимость для обоих контроллеров.