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.

$ yo angular-fullstack:directive appxComment

? 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

$ 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 :

<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

'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

<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.

<appx-comment></appx-comment>

Exemple d’utilisation dans une boucle ng-repeat

<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