Un petit article rapide concernant la communication entre une directive et un controller en Angular via une fonction.

Il est possible de définir dans une directive une fonction de callback vers notre controller. Il faut définir une propriété de type fonction via un &.

scope: {
   demoOnClick: '&'
}

Voyons comment utiliser une fonction avec des paramètres.

Appel de fonction avec paramètre

Angular utilise l’injection de dépendance qui permet d’injecter dans les différents composants Angular, les ressources requises par ce dernier.

Cela fonctionne de la même façon lors de l’appel de la fonction.

Lors de l’appel de la fonction coté directive, il faut passer un objet JavaScript avec les paramètres nommés. Dans votre code HTML où vous utilisez la directive, il faut spécifier pour la variable de type fonction, le nom des paramètres que l’on souhaite recevoir. Ainsi Angular va injecter seulement les paramètres dont vous avez besoin. Attention de bien utiliser les noms des propriétés au risque de recevoir des undefined ….

Voici un exemple :

Cela est déconcertant au début et j’avoue avoir perdu un peu de temps. Cela peut s’avérer pratique dans le cas d’une directive qui peut passer plusieurs paramètres et dont votre controller n’a besoin que d’un paramètre spécifique comme dans l’exemple ci dessus. Ainsi, il ne n’est pas nécessaire de définir tout les paramètres et ainsi éviter des erreurs JSHint nous indiquant qu’un paramètre n’est pas utilisé.