cómo hablan las cosas de angular entre sí (1)

Comunicación entre controladores

Francis Picabia

archivado en: JavaScript / 28 mayo, 2015 / taller:

Me da algo de pereza hablar de angular 1.* mientras su futuro siga siendo tan incierto, pero como algunos compañeros del trabajo necesitan ponerse pilas con el tema, voy a retomar el framework en este blog. Dicho esto, ar lío 😛

Una de las dificultades más grandes cuando se está empezando con angular, creo, es entender cómo se comunican los distintos componentes entre sí: directivas con controladores, controladores con servicios, servicios con directivas, etcétera. Trataré de explicar algunas pistas para entender el asunto.

Empezamos con los controladores. El caso más sencillo es desde un controlador hijo a un controlador padre, entendiendo por hijo que en el DOM se encuentra dentro del padre. Algo así:

<section ng-controller="controladorUno">

{{miVariable}}

<article ng-controller="controladorDos"></article>

</section>

Basta con utilizar la propiedad $parent del $scope...

angular.module('angularLabApp')

.controller('controladorUno', function ($scope) {

})
.controller('controladorDos', function ($scope) {

$scope.$parent.miVariable = "hey, hey :P";

});

Sin embargo, aparte de que esto solo funciona de hijos a padres y se corre el riesgo de que al modificar el DOM se interrumpa la comunicación, el problema de hacerlo así es que nos obligaría a poner un watch en controladorUno para saber cuándo se cambia la variable desde controladorDos y, en principio, es mejor evitar los watches en la medida de lo posible por su coste en rendimiento. Pero bueno, según que casos, es una solución razonable.

Otro camino es utilizar los métodos $emit, $broadcast y $on de $scope. El mecanismo básico es muy sencillo: desde un controlador se emite un evento -$emit cuando va hacia arriba y $broadcast cuando va hacia abajo-, que se recoge desde otro con $on.

En $emit y $broadcast se define el nombre del evento, de la escucha para entendernos, y como segundo parámetro se pueden pasar datos; y en el segundo parámetro del $on podemos definir una función callback que recibe dos argumentos: el evento, lo que nos permite poner un preventDefault y un stopPropagation para evitar que siga "ascendiendo" o "descendiendo", y los datos que nos mandan. Esto queda más claro en código:

angular.module('angularLabApp')

.controller('controladorUno', function ($scope) {

$scope.$on('cambiaVariable', function(event, args) {

event.stopPropagation();

$scope.miVariable = args;

});

})

.controller('controladorDos', function ($scope) {

$scope.$emit('cambiaVariable', "hey, hey :P");

});

Para unbindear la escucha, el $on, el mecanismo es sencillo, aunque no tanto como jQuery : ). $on devuelve una función que se encarga de remover la escucha, por lo que si la cacheamos en una variable, luego podemos invocarla cuando la necesitemos, por ejemplo, en el evento $destroy del $scope, es decir, cuando se destruye el scope del controlador al pasar a otra vista.

var unbindCambiaVariable = $scope.$on('cambiaVariable', function(event, args) {

event.stopPropagation();

$scope.miVariable = args;

}); /* retorna la función que unbindea */

$scope.$on('$destroy', function() {

unbindCambiaVariable();

});

En teoría, angular se encarga de remover todas las escuchas en el evento $destroy, por lo que no deberíamos preocuparnos de quitarlas a mano salvo que las hayamos enganchado al propio $rootScope.

$rootScope.$on('miEscucha', miFuncion);

Bueno, por hoy lo dejo aquí. En la próxima entrada veremos cómo hablan las directivas.

|| Tags: ,

valoración de los lectores sobre cómo hablan las cosas de angular entre sí (1)

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “cómo hablan las cosas de angular entre sí (1)

  1. pedrito rod el dijo:

    puedes decirme al día de hoy 19 dic 2015, si vale la pena angularjs o no? gracias estoy decidiendo si usarlo…

  2. En general, depende de la envergadura de la aplicación. Si es grande (más de 10 pantallas) y pesa más el trabajo contra una api REST (contra datos) que el trabajo contra el DOM, sí, creo que sigue valiendo la pena, al menos la familia 1.*