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.
|
1 |
$ yo angular-fullstack:directive appxComment |
|
1 2 3 4 5 6 7 |
? Where would you like to create this directive? client/components/ ? Does this directive need an external html file? Yes create client/components/appxComment/appxComment.directive.js create client/components/appxComment/appxComment.directive.spec.js create client/components/appxComment/appxComment.html create client/components/appxComment/appxComment.less |
|
1 |
$ grunt serve |
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 :
|
1 |
<appx-comment omdbid="film.imdbID"></appx-comment> |
De plus, scope.$watch est utilisé afin d’écouter les changements sur l’attribut omdbid.
appxComment.directive.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
'use strict'; angular.module('fs3App') .directive('appxComment', function ($http) { return { templateUrl: 'components/appxComment/appxComment.html', restrict: 'E', scope: { omdbid: '=omdbid' }, link: function (scope, element, attrs) { scope.$watch('omdbid', function(value) { if(value !== undefined) { $http({ method: 'GET', url: 'https://api.herokuapp.com/api/comments?movie_id='+value, timeout: 5000, }).then( function successCallback(response) { scope.comments = response.data; }, function errorCallback(response) { console.log('Error loading comments'); } ); } }); } }; }); |
La vue de la directive
Le code suivant présente la vue HTML pour la directive. Rien de spécial à déclarer.
appxComment.html
|
1 2 3 4 5 6 |
<h2>Comments</h2> <ul> <li ng-repeat="comment in comments"> {{ comment.body }} </li> </ul> |
Utiliser la directive dans votre vue
Vos pouvez maintenant utiliser la directive dans vos vues comme un nouvel élément (E) HTML.
|
1 |
<appx-comment></appx-comment> |
Exemple d’utilisation dans une boucle ng-repeat
|
1 2 3 4 5 6 7 |
<h1>Films</h1> <div ng-repeat="film in myFilms"> <h2>{{ film.Title }}</h2> <appx-comment omdbid="film.imdbID"></appx-comment> </div> |
Références
https://docs.angularjs.org/guide/directive
https://gist.github.com/BinaryMuse/4011013
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!