AngularJS ayuda a compartir datos entre controladores usando $ broadcast
He estado tratando de usar $ broadcast y $ on pero no puedo hacer que los datos se muevan entre los dos controladores.
En mi página web principal tengo un botón que agrega 4 a una variable cada vez que se pulsa:
<!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>
En mi mainCtrl tengo la función add () y uso $ broadcast para transmitir mi valor:
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)
}
});
Luego tengo un segundo controlador para mi ventana emergente usando $ on para recibir la transmisión:
module.controller('popUpCtrl', function ($scope) {
$scope.$on('totalBroadcast', function(events, args){
$scope.total = args;
})
})
Luego, mi HTML emergente utiliza el segundo controlador y $ scope.total como expresión:
<!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>
Parece que no se han pasado datos a mi segundo controlador, la expresión no muestra nada en absoluto.
EDITAR
También intenté usar un servicio, los HTML anteriores siguen siendo los mismos, pero ahora he agregado un servicio
module.factory('myService', function () {
var total = 0;
var setTotal = function (x) {
total = x;
}
var getTotal = function () {
return total;
};
return {
setTotal: setTotal,
getTotal: getTotal
}
});
Mi controlador principal y función de anuncios ahora son:
module.controller("mainCtrl", function ($scope, myService) {
var total = 0
$scope.add = function (x) {
myService.setTotal(x)
}
});
y mi controlador popupCtrl ahora es esto:
module.controller('popUpCtrl', function ($scope, myService) {
$scope.total = myService.getTotal();
})
{{total}} en mi ventana emergente ahora se expresa como el "0" al que var total es igual en mi servicio. Por lo tanto, los datos ahora se transfieren utilizando el servicio, pero el método setTotal () no está configurando el var como lo indica la función add () ahora. He inyectado mi servicio como una dependencia para ambos controladores.