Directives

Les directives Angular JS permettent de modifier le DOM et son comportement. Elles peuvent être invoquées sur différents éléments (éléments - E, attributs - A, classe Css - C, commentaire - M) : 

<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>

Directives fréquemment utilisées

Directive Portée Exemple Rôle
ng-app A 
<html ng-app="myModule">...
 Désigne le root d'une application (module),
se place généralement sur les balises html ou body de la page
ng-controller A 
<div ng-controller="MyController">
...
{{uneExpressionDefinieDansLeScope}}
</div>

<div ng-controller="MyController as myCtrl">
...
{{myCtrl.uneVariable}}
</div>
Associe une classe contrôleur dans une application (module)
à la partie de la vue désignée et défini une nouvelle portée $scope
ng-bind A C 
<span ng-bind="name"></span>
Associe (bind) la partie HTML spécifiée à une expression
ng-model A 
<input type="text" ng-model="name">
Associe (bind) l'élément HTML spécifié (input, select, textarea) à une expression
ng-value A 
<input type="radio" ng-value="name">
Associe (bind) la valeur de l'élément HTML spécifié (input type=“radio”, option)
à une expression
Directive Portée Exemple Rôle
ng-include E A C 
<div ng-include="expressionUrl">...</div>
 inclut à l'endroit spécifié le fichier html correspondant à l'expression
ng-switch A 
  <div ng-switch on="expression">
      <div ng-switch-when="valeur1">...</div>
      <div ng-switch-when="valeur2">...</div>
      <div ng-switch-default>...</div>
  </div>
 inclut selon la valeur de l'expression les éléments HTML aux endroits spécifiés
ng-repeat A 
<div ng-repeat="element in elements">...</div>
 Répète une séquence HTML pour chacun des éléments d'un tableau ou d'une collection
ng-init peut éventuellement servir à initialiser la collection
Directive Portée Exemple Rôle
ng-click A 
<div ng-click="jsExpression">...</div>
 Associe un comportement au click sur l'élément $event correspond à l'objet event généré
ng-show A 
<div ng-show="booleanJsExpression">...</div>
 Affiche ou masque l'élément associé
ng-hide A 
<div ng-hide="booleanJsExpression">...</div>
 Masque ou affiche l'élément associé
ng-class A 
<div ng-class="String, Array, Map or condition">...</div>
 Modifie de manière conditionnelle la classe de l“élément associé
ng-submit A 
<form ng-submit="function()">...</div>
 Soumet le formulaire associé