AngularJS je m'y mets !

Directives

Nous avons déjà utilisé quelques directives. On a vu qu'il est possible grâce à elles d'ajouter des comportements ou de manipuler le DOM. Malgré la richesse de la panoplie proposée par AngularJS il vous faudra forcément une fonctionnalité qui n'a pas été prévue. La bonne nouvelle c'est que vous pouvez créer vos propres directives ! Comme c'est un domaine un peu dense on va y aller progressivement avec un premier exemple élémentaire :

<div ng-app="monApplication">
	<div madirective></div>
	<script>
		angular.module('monApplication', []).
		directive('madirective', function () {
			return {
				template: "<p> Je suis une directive qui s'affiche ! </p>"
			}
		});
	</script>
</div>

Comment cette directive est-elle créée ? On utilise la méthode directive du module. On nomme la directive, ici madirective puis on crée une fonction pour créer concrètement cette directive. Cette fonction retourne un objet. Ici il n'y a qu'une propriété template. Comme son nom l'indique elle définit une portion de HTML. Cette portion de HTML va venir s'insérer dans le DOM à l'emplacement de la déclaration de la directive. J'ai déclaré cette directive au niveau d'une div en tant qu'attribut, ce qui est l'emplacement par défaut. La portion de HTML va donc venir se loger au sein de cette div :

<div madirective=""><p> Je suis une directive qui s'affiche ! </p></div>
Suivant

Retour à l'accueil...