¿Alguien puede ayudarme a comprender la forma en que deberíamos usar $rootScope.$on y $scope.$on.

Sé que es principalmente para escuchar diferentes alcances ($ rootScope y $ scope).

Mi consulta es para el siguiente escenario:

¿Debo usar: $ rootScope. $ Emit con $ rootScope. $ On

O

Prefiero: $ rootScope. $ Broadcast con $ scope. $ On Sé que esta no será una buena opción, ya que se transmitirá a todos los $scope obj.

O

¿Debo optar por: $ rootScope. $ Broadcast con $ rootScope. $ Activado

Como puede ver, necesito manejar el evento en el nivel $ rootScope.

¿Cuál es la diferencia en las 3 implementaciones anteriores?

7
Samuel 13 ene. 2017 a las 13:24
¿Aún necesitas una respuesta para esto? Podría crear uno.
 – 
lin
25 abr. 2017 a las 15:11
@lin: sí por favor, eso sería genial. Mi duda sigue en pie
 – 
Samuel
26 abr. 2017 a las 16:19
Listo =) por favor revise mi respuesta.
 – 
lin
27 abr. 2017 a las 11:11

1 respuesta

La mejor respuesta

Estas son buenas preguntas y hay una explicación para ti.

En primer lugar, tenga en cuenta que:

  • $scope.on('event'); escuchará $scope.$broadcast('event') y $rootScope.$broadcast('event')

  • $rootScope.on('event'); escuchará $rootScope.$broadcast('event') y $rootScope.$emit('event')

A continuación, debe tener en cuenta que:

  • $scope.on(); se destruirá automáticamente cuando el controlador pierda su representación a la vista o componente (quedando destruido).
  • Necesita destruir $rootScope.$on() manualmente.

>> Ejemplo de cómo destruir $rootScope.on():

//bind event
var registerScope = $rootScope.$on('someEvent', function(event) {
    console.log("fired");
});

// auto clean up `$rootScope` listener when controller getting destroy
// listeners will be destroyed by calling the returned function like registerScope();
$scope.$on('$destroy', registerScope);

>>> Desde Angular v1.5 podemos usar el ciclo de vida de los componentes para administrar init y destruye de una manera agradable:

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

myApp.controller('MyCtrl', function ($scope, $rootScope) {

  var registerScope = null;

  this.$onInit = function () {
    //register rootScope event
    registerScope = $rootScope.$on('someEvent', function(event) {
        console.log("fired");
    });
  }

  this.$onDestroy = function () {
    //unregister rootScope event by calling the return function
    registerScope();
  }
});

Este plnkr le mostrará los diferentes comportamientos de $scope.on() y $rootScope.on().

Al cambiar la vista en este plunkr, el controlador se volverá a vincular a su vista. El evento $rootScope.on(); se enlaza cada vez que cambia una vista sin destruir los enlaces de eventos de la vista anterior. De esa manera, los oyentes $rootScope.on() se apilarán / multiplicarán. Esto no sucederá con los enlaces $scope.on() porque se destruirá al cambiar la vista (se perderá la representación del enlace E2E en DOM -> se destruirá el controlador).

La diferencia entre $emit y $broadcast es:

  • Los eventos $rootScope.$emit() solo activan eventos $rootScope.$on().
  • $rootScope.$broadcast() activará eventos $rootScope.$on() y $scope.on() (casi todos escuchan este evento).
  • $scope.$emit() activará todos los $scope.$on, todos sus padres (ámbitos en los controladores principales) y $rootScope.$on().
  • $scope.$broadcast solo activará $scope y sus elementos secundarios (ámbitos en los controladores secundarios).

Enlaces Adicionales

23
lin 31 ago. 2017 a las 12:09