AngularJS

Directive

Une directive est un moyen simple et rapide d'ajouter un élément à différents endroits de l'application angularJS.

Imaginons que dans chaque vue de votre application angularJS vous avez un lien "nous contacter" dans votre texte, et que vous souhaitez centraliser les informations contenu dans ce lien (href, title, contenu du lien...) à un seul endroit. Il faut donc utiliser une directive.

Pour commencer, nous allons voir les différents moyens d'appeler une directive dans une vue.

  1. <!-- Attribut -->
  2. <a lien-contact></a>
  3. <!-- Élément -->
  4. <lien-contact></lien-contact>
  5. <!-- Classe -->
  6. <a class="lien-contact"></a>
  7. <!-- Commentaire -->
  8. <!-- directive: lien-contact -->

Nous allons maintenant créer un fichier dans notre dossier /js/directives/ qui contiendra :

  1. /* Faite attention, le "lien-contact" se transforme en "lienContact" */
  2. angular.module('myApp').directive('lienContact', function () {
  3. return{
  4. };
  5. });

Une fois la directive créée, nous avons la possibilité de lui ajouter plusieurs paramètres, dont les plus importants sont Restrict, Replace, Transclude, Template, TemplateUrl

  1. angular.module('myApp').directive('lienContact', function () {
  2. return{
  3. restrict: 'A',
  4. replace: true,
  5. transclude: false,
  6. template: '<a href="#">contact</a>',
  7. };
  8. });

Restrict
Indique la manière dont va être appelée la directive. A pour attribut, E pour élément, C pour class, M pour commentaire. Il est tout à fait possible de cumuler les valeurs comme EA qui est la valeur par défaut.

Replace
Permet d'indiquer si l'on remplace entièrement la balise appelant la directive.
Valeur : True ou False.

Transclude
Définit si l'on garde le contenu présent à l'intérieur de la balise appelante. Si vous souhaitez garder le contenu, il faudra également ajouter l'attribut ng-transclude dans la vue.
Valeur : True ou False.

Template
La directive remplace la balise appelante par le contenu de ce paramètre.

TemplateUrl
Identique au paramètre Template mais le contenu qui remplacera la balise appelante se trouve dans un fichier externe.

Controller et Link
Afin d'ajouter un peu de javascript à notre directive, nous avons la possibilité de lui ajouter un controller et un link. Ces deux éléments font la même chose mais pas au même moment. Le controller est lancé avant la compilation et le link après.
Voici une directive qui nous permettra de voir leur ordre d'exécution.

  1. angular.module('myApp').directive('controllerLink', function () {
  2. return {
  3. restrict: 'A',
  4. replace: true,
  5. transclude: false,
  6. template: '<p>{{text}}</p>',
  7. controller:function($scope, $element){
  8. $scope.text = "Premier - ";
  9. },
  10. link:function(scope, element,param){
  11. scope.text = scope.text + "Deuxième";
  12. }
  13. };
  14. });

Pour en finir avec les directives, voici un exemple utilisant le link et du javascript pour la création d'une horloge numérique.
Pourquoi utiliser le link et pas le controller ? Pour éviter que le javascript de mon horloge ralentisse l'affichage de la vue.

  1. angular.module('myApp').directive('horloge', function () {
  2. return {
  3. link: function (scope, element, attrs) {
  4. function afficheHeure(){
  5. var date = new Date();
  6. var heure = date.getHours();
  7. var minute = date.getMinutes();
  8. var seconde = date.getSeconds();
  9. element.text(heure+" : "+minute+" : "+seconde);
  10. }
  11. var interval = setInterval(afficheHeure,1000);
  12. }
  13. };
  14. });

Exemples

Utilisation de la directive lienContact

contact

Démo controller / link

Premier - Deuxième


Affichage de l'heure avec une directive

6 : 40 : 51