Directive Angular complexe

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

 

 

 

Comments

comments

0 réponses

Répondre

Want to join the discussion?
Feel free to contribute!

Laisser un commentaire

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