Blue Flower

Chercher

angularJS: Directives

Généralités

Une directive est un marqueur sur un élément du DOM (Document Objet Model) d'une page HTML (comme un attribut, un nom d'élément, un commentaire ou une classe CSS) qui indique au compilateur HTML d'AngularJS ($compile) d'attacher un comportement spécifique à cet élément du DOM (par exemple via des écouteurs d'événements), ou même de transformer l'élément du DOM et ses descendants.
Les directives constituent des liaisons entre le DOM et les controllers; elles permettent d’identifier un élément d'un DOM afin que le controller associé y applique sa logique. Dans AngularJS on  dispose de directives internes du framework et on a la possibilité d'en  créer soit même.

Création de directives :

Le comportement d'une directive AngularJS est défini  par une fonction JavaScript; cette fonction est le deuxième paramètre de la fonction  "angular.module( 'myApp', [ ] ).directive(...)"  utilisée  pour créer  la directive; cette fonction ".directive(...)" retourne  un objet JavaScript utilisé pour configurer le comportement de la directive. Parmis les éléments retourné par cette fonction on a le  paramètre "restrict" qui  sert à définir le type de la directive qui  peut être la valeur A pour préciser que la directive sera un Attribut, C pour une Class CSS, E pour un Element (élément) et M pour un coMment (commentaire); donc si on créé une  directive dont le nom est "date-picker",  on peut s'en servir dans une des quatre situations suivantes:

  • Soit la directive est considérée comme  un élément  (une balise au sein de la page HTML)  et dans la page html on s'en sert comme  suit  (<date-picker></date-picker>)
  • Soit la directive constitue un Attribut d'une balise  ( par exemple la balise est un  attribut de la balise "input"  <input type="text" date-picker/>).
  • Soit la directive constitue une classe CSS  ( par exemple la balise une class css utilisée par la balise "input"  <input type="text" class="date-picker"/>).
  • Soit la directive est utilisée au sein  d'un commentaire  (<!--directive:date-picker-->).

Remarque: au sein de la page HTML où on utilise la balise il existe plusieurs notation ( voir documentation)

Dans les codes HTML( au sein des pages HTML) qui utiliseront la directive, le nom de la directive, si on prend l'exemple de la directive définie ci-dessus, est date-picker mais au sein du code javaScript on utilise la notation camelCase se  qui donne datePicker 

Exemple

angular.module('myApp', []).directive('datePicker', function() {
return {
 restrict: 'AEC',
 replace: true,
 template: '<h3>Hello, World!</h3>'
};
});

Donc ici on a créé une directive au sein de l'application "myApp" dont le nom est "datePicker" et c'est le premier argument de la fonction "angular.module ().directive ()". Le deuxième argument est une fonction anonyme qui caractérise le comportement de la directive; cette fonction renvoie un objet. Cet objet  a diverses propriétés qui sont utilisées pour configurer la directive. Cette fonction peut lister les dépendances de la directive comme  $rootScope, $http, etc :

Replace:
Permet d'indiquer si l'on remplace entièrement la balise appelant la directive par celle qu'on est en train de créer.
Valeur : True si oui (False sinon).
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 (si on garde) ou False(sinon ).
Template
La directive remplace la balise appelante par le contenu de ce paramètre "Template".
TemplateUrl
Identique au paramètre Template mais le contenu qui remplacera la balise appelante se trouve dans un fichier externe.
Controller et Link
On peut ajouter un paramètre controller à une directive mais aussi le paramètre 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.
​La propriété "link" est utilisé si la propriété "compile" n'est pas définie définie;...
 link
La fonction link est exécutée pour chaque instance créée par la directive afin que chacune d'elle obtienne sa propre logique métier sans affecter les autres instances. Si on doit ajouter des fonctionnalités à une instance créée par la directive, on doit l'ajouter à la scope de l'élément avec laquelle on traite.

La fonction link est responsable de l'enregistrement des Listners du DOM ainsi que de sa mise à jour. Elle est exécutée après que le Template ait été cloné. C'est là que se situera l'essentiel de la logique de la directive.

angular.module('myApp', []).directive('datePicker', function() {
function link(scope, iElement, iAttrs, controller, transcludeFn) 
{ ... } return { restrict: 'AEC', replace: true, template: '<h3>Hello, World!</h3>' link: link, scope: {} }; });  

....

  • Le scope - Le scope  à utiliser par la directive pour l'enregistrement des watches (voir $watch).
  • iElement - élément d'instance - L'élément où la directive doit être utilisée. Il est prudent de manipuler les enfants de l'élément uniquement dans la fonction postLink puisque les enfants ont déjà été liés.
  • iAttrs - attributs d'instance - Liste normalisée des attributs déclarés sur cet élément partagé entre toutes les fonctions de liaison de directive.
  • controller - les instances des controllers requis pour la directive  - ces instances  sont partagées entre toutes les directives, ce qui permet aux directives d'utiliser les controllers comme canal de communication. La valeur exacte de controller dépend de la propriété require de la directive:
    1. pas de controller (s) requis: le controller de la directive est indéfini si la directive n'en a pas
    2. string: l'instance du controller
    3. array: tableau d'instances de controller

On aura l'occasion de voir leur fonctionnement dans un exemple....

précédent