$rootScope.$broadcast se usa para transmitir un evento «global» que puede ser captado por cualquier oyente de ese ámbito en particular. Los ámbitos descendientes pueden capturar y manejar este evento usando $scope.$on .
Sintaxis:
$rootScope.$broadcast(name, args) $scope.$on(name, listener);
donde listener especifica la función a llamar cuando se captura el evento.
Acercarse:
- Cree un ParentController desde el que desee generar/transmitir un evento.
- Use $rootScope.$broadcast en AngularJS para transmitir el evento desde ParentController.
- Cree un ChildController o un ExternalController (es decir, no un descendiente directo del ParentController) para capturar y manejar el evento.
- Use $scope.$on en AngularJS para capturar el evento respectivo.
Ejemplo: este programa usa $rootScope.$broadcast para generar un evento usando el enfoque discutido anteriormente.
<!DOCTYPE html>
<html>
<head>
<script src=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.js">
</script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('ParentController', function(
$rootScope, $scope) {
$scope.broadcastMessage = function() {
$rootScope.$broadcast('newEvent', {
message: $scope.parentMessage
});
};
});
app.controller('ChildController', function($scope) {
$scope.$on('newEvent', function(event, args) {
$scope.message = args.message;
});
});
app.controller('ExternalController', function($scope) {
$scope.$on('newEvent', function(event, args) {
$scope.message = args.message;
});
});
</script>
<style type="text/css">
h1,
code {
color: green;
}
p {
color: green;
display: inline-block;
}
div {
border-color: black;
border-style: solid;
padding: 10px;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="ParentController">
<h1>Parent Controller</h1>
<input ng-model="parentMessage">
<button ng-click="broadcastMessage()">
Broadcast Message
</button>
<br>
<br>
<div ng-controller="ChildController">
<h1>Child Controller</h1>
<p>Message :</p>
<code>{{message}}</code>
</div>
</div>
<br>
<br>
<div ng-controller="ExternalController">
<h1>External Controller</h1>
<p>Message :</p>
<code>{{message}}</code>
</div>
</body>
</html>
Producción: