Maintenant que vous comprenez mieux le fonctionnement des directives, je vous propose de poursuivre l’apprentissage en créer une nouvelle directive un peu plus complexe.

Si vous n’avez pas lu l’article d’introduction aux directive, je vous propose de le lire maintenant.

Créer une directive avec Angular-Fullstack

Pour les utilisateurs du générateur Angular-Fullstack, il est proposé d’utiliser l’outil de ligne de commande afin de créer votre nouvelle directive. Il est conseillé de suivre la structure déjà imposée par Fullstack et de créer vos nouvelles directive dans le dossier client/components.

 

Relancer grunt serve pour mettre à jour votre fichier index.html. Autrement, les .js ne seront pas chargés et votre directive ne sera pas fonctionnelle.

Écrire le code du contrôleur de la directive

La directive présentée utilisera l’attribut imdbid (identifiant unique d’un film) déclaré dans la section scope et lancera une requête AJAX afin de récupérer tous les commentaires reliés à ce film.

Cette directive sera utilisée de la façon suivante :

De plus, scope.$watch est utilisé afin d’écouter les changements sur l’attribut omdbid.

appxComment.directive.js

La vue de la directive

Le code suivant présente la vue HTML pour la directive. Rien de spécial à déclarer.

appxComment.html

Utiliser la directive dans votre vue

Vos pouvez maintenant utiliser la directive dans vos vues comme un nouvel élément (E) HTML.

Exemple d’utilisation dans une boucle ng-repeat

Références

https://docs.angularjs.org/guide/directive

https://gist.github.com/BinaryMuse/4011013

 

 

 

Facebook Comments

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.