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é |
127.0.0.1