¿Por qué usamos $rootScope.$broadcast en AngularJS?

$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:

Publicación traducida automáticamente

Artículo escrito por rohanr y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *