Etienne Crinier

Dans un précédent article je parlais des paramètres de directive. Le moyen le plus efficace pour communiquer avec un composant parent.

Dans cet article je vais vous parler des événements, l’autre moyen de communication avec d’autres composants.

Il est possible d’émettre des événements depuis le $scope ou bien depuis le $rootscope.

Si vous avez bien suivi mon article concernant le $scope vs $rootScope, vous comprendrez donc dans quel cas il faut choisir d’émettre l’événement depuis le $scope ou le $rootscope. Je vais néanmoins faire une légère piqûre de rappel.

Le $scope est capable de communiquer avec n’importe quel parent ou enfant. Par contre il ne pourra pas communiquer avec un « frère ». Voici un exemple pour comprendre :

Ici je souhaite communiquer depuis mon composant « dashboard » vers mes autres composants . 3 cas de figures :

• Le composant est un enfant (le cas de ma directive « component »)
  • Je vais pouvoir faire utiliser simplement le scope
  • Et le mode $broadcast, ce qui nous donne :
  • $scope.$broadcast(‘monEvent’,args);
• Le composant est un « frère » (sidebar)
  • Etant donné que chaque directive a un scope isolé (même s’il existe une exception), il est donc logique les scope de « c1 » et « c2 » ne puissent pas communiquer
  • Du coup, pour les faire communiquer on va devoir utiliser le $rootscope.
  • Et le mode $broadcast
  • $rootScope.$broadcast(‘monEvent’, args);
• Le composant est un parent (header-content)
  • Comme on l’a vu précédemment le scope reste le même, du coup on peut utiliser le Scope
  • On veut faire remonter l’événement, donc on va utiliser $emit :
  • $scope.$emit(‘monEvent’,args);

Une petite astuce pour pas de tromper sur l’utilisation de $broadcast et $emit :

• Si l’on souhaite faire descendre l’événement, on utilise $broadcast
• Si l’on souhaite faire monter l’événement on utilise $emit

A noter qu’en fait le $emit peut être capter à la fois par les parents mais aussi par les enfants

Pour finir, les arguments d’événement peuvent être ce que l’on veut, aussi bien un simple string, qu’un objet complexe ou bien encore une méthode (pour passer un callback par exemple) 😉