AngularJS => Eventos

Parámetros

Parámetros	Tipos de valores
evento	Object {name: "eventName", targetScope: Scope, defaultPrevented: false, currentScope: ChildScope}
args	Datos que se han pasado junto con la ejecución del evento.

Utilizando sistema de eventos angulares.

$ scope. $ emit

El uso de $scope.$emit disparará un nombre de evento hacia arriba a través de la jerarquía de alcance y notificará a $scope . El ciclo de vida del evento comienza en el ámbito en el que se llamó a $emit .

Wireframe de trabajo:

$ scope. $ broadcast

El uso de $scope.$broadcast desencadenará un evento en $scope . Podemos escuchar estos eventos usando $scope.$on

Wireframe de trabajo:

Sintaxis:

// firing an event upwards
$scope.$emit('myCustomEvent', 'Data to send');

// firing an event downwards
$scope.$broadcast('myCustomEvent', {
  someProp: 'some value'
});

// listen for the event in the relevant $scope
$scope.$on('myCustomEvent', function (event, data) {
  console.log(data); // 'Data from the event'
});

En lugar de $scope , puede usar $rootScope , en ese caso, su evento estará disponible en todos los controladores, independientemente del alcance de los controladores.

Evento limpio registrado en AngularJS

El motivo para limpiar los eventos registrados, ya que incluso el controlador ha sido destruido, el manejo del evento registrado sigue vivo. Así que el código se ejecutará como inesperado seguro.

// firing an event upwards
$rootScope.$emit('myEvent', 'Data to send');

// listening an event
var listenerEventHandler = $rootScope.$on('myEvent', function(){
    //handle code
});

$scope.$on('$destroy', function() {
    listenerEventHandler();
});

Usos y significado

Estos eventos se pueden utilizar para comunicarse entre 2 o más controladores.

$emit envía un evento hacia arriba a través de la jerarquía de alcance, mientras que $broadcast envía un evento hacia abajo a todos los ámbitos secundarios. Esto se ha explicado muy bien aquí .

Básicamente, puede haber dos tipos de escenarios mientras se comunican entre los controladores:

Cuando los controladores tienen relación padre-hijo. (En su mayoría, podemos usar $scope en tales escenarios)

Cuando los controladores no son independientes entre sí y son necesarios para estar informados sobre la actividad de cada uno. (Podemos usar $rootScope en tales escenarios)

por ejemplo: para cualquier sitio web de comercio electrónico, supongamos que tenemos ProductListController (que controla la página de listado de productos cuando se hace clic en cualquier marca del producto) y CartController (para administrar los artículos del carrito). Ahora, cuando hacemos clic en el botón Agregar al carrito , también se debe informar a CartController , para que pueda reflejar el nuevo recuento de artículos del carrito / detalles en la barra de navegación del sitio web. Esto se puede lograr usando $rootScope .

Con $scope.$emit

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script>
        var app = angular.module('app', []);

        app.controller("FirstController", function ($scope) {
            $scope.$on('eventName', function (event, args) {
                $scope.message = args.message;
            });
        });

        app.controller("SecondController", function ($scope) {
            $scope.handleClick = function (msg) {
                $scope.$emit('eventName', {message: msg});
            };
        });

    </script>
  </head>
  <body ng-app="app">
    <div ng-controller="FirstController" style="border:2px ;padding:5px;">
        <h1>Parent Controller</h1>
        <p>Emit Message : {{message}}</p>
        <br />
        <div ng-controller="SecondController" style="border:2px;padding:5px;">
            <h1>Child Controller</h1>
            <input ng-model="msg">
            <button ng-click="handleClick(msg);">Emit</button>
        </div>
    </div>
  </body>
</html>

Con $scope.$broadcast :

<html>
  <head>
    <title>Broadcasting</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script>
        var app = angular.module('app', []);

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

        });

        app.controller("SecondController", function ($scope) {
            $scope.$on('eventName', function (event, args) {
                $scope.message = args.message;
            });
        });

    </script>
  </head>
  <body ng-app="app">
    <div ng-controller="FirstController" style="border:2px solid ; padding:5px;">
        <h1>Parent Controller</h1>
        <input ng-model="msg">
        <button ng-click="handleClick(msg);">Broadcast</button>
        <br /><br />
        <div ng-controller="SecondController" style="border:2px solid ;padding:5px;">
            <h1>Child Controller</h1>
            <p>Broadcast Message : {{message}}</p>
        </div>
    </div>
  </body>
</html>

Siempre cancele el registro de $ rootScope. $ En los escuchas en el evento scope $ destory

$ rootScope. $ en los escuchas permanecerán en la memoria si navega a otro controlador. Esto creará una pérdida de memoria si el controlador queda fuera del alcance.

No hacer

angular.module('app').controller('badExampleController', badExample);

badExample.$inject = ['$scope', '$rootScope'];
function badExample($scope, $rootScope) {

    $rootScope.$on('post:created', function postCreated(event, data) {});

}

Hacer

angular.module('app').controller('goodExampleController', goodExample);

goodExample.$inject = ['$scope', '$rootScope'];
function goodExample($scope, $rootScope) {

    var deregister = $rootScope.$on('post:created', function postCreated(event, data) {});

    $scope.$on('$destroy', function destroyScope() {
        deregister();
    });

}

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

AngularJS
Eventos

Buscar..