Usa $broadcast() en AngularJS

Rana Hasnain Khan 15 febrero 2024

Angular Angular Event

Este artículo presentará $broadcast() en AngularJS.

Usa `$broadcast()` en AngularJS

$broadcast() es un método $rootScope para enviar eventos desde los controladores principales a los controladores secundarios. Envía un evento que el oyente de ese ámbito en particular puede captar.

Una vez que el evento se envía desde el controlador principal a un controlador secundario, el controlador secundario puede manejar el evento usando otro método, $scope.$on.

Veamos un ejemplo en el que usaremos $broadcast(). Primero, crearemos un nuevo archivo, script.js, en el que definiremos nuestros controladores.

Enviaremos un mensaje desde nuestro controlador principal a un controlador secundario usando $broadcast(), y recibiremos el evento en nuestro controlador secundario y lo registraremos en la consola usando otro método, $scope.$on() , Como se muestra abajo.

# angular
import angular from 'angular';

var app = angular.module('app', []);

 app.controller("parentCtrl", function ($scope) {
 $scope.handleClick = function (msg) {
 $scope.$broadcast('sendMsg', { message: msg });
 };

 });

 app.controller("childCtrl", function ($scope) {
 $scope.$on('sendMsg', function (event, args) {
 $scope.message = args.message;
 console.log($scope.message);
 });
 });

Ahora, creemos una interfaz en index.html, en la que crearemos una entrada que tomará un mensaje del controlador principal. Cuando hacemos clic en el botón send, lo enviará al controlador secundario.

El controlador secundario recibirá el mensaje y lo registrará en la consola, como se muestra a continuación.

# angular
<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="lib/style.css" />
        <script src="lib/script.js"></script>

    </head>

    <body ng-app="app">
        <div ng-controller="parentCtrl">
            <h1>Send to Child controller</h1>
            <input ng-model="msg">
            <button ng-click="handleClick(msg);">Broadcast</button>
            <br /><br />
            <div ng-controller="childCtrl">
            </div>
        </div>
    </body>
</html>

Producción:

Transmitir en Angularjs Frontend

Consola:

Difundir en Angularjs Resultado

Del ejemplo anterior, usando $broadcast(), enviamos eventos o mensajes desde los controladores principales a los controladores secundarios. Y usando el método $scope.$on(), recibimos el evento o mensaje en el controlador secundario e hicimos algunas funciones.

Autor: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Usa $broadcast() en AngularJS

Artículo relacionado - Angular Event

Usa `$broadcast()` en AngularJS