AngularJS je m'y mets !

Directives

Avant d'aller plus loin je rappelle le processus d'initialisation d'AngularJs :

Donc dans une directive on peut se retrouver avec ces deux propriétés :

directive('monespaceDirective', function () {
	return {
		compile: function compile(element, attrs, transclude) { ... },
		link: function link(scope, element, attrs, controller) { ... }
	}
});

Il est rare d'avoir besoin d'une fonction de compilation. Si on peut s'en passer et qu'en plus on prend toutes les propriétés par défaut on simplifie la syntaxe ainsi :

directive('monespaceDirective', function () {
	return function (scope, element, attrs, controller) { ... }
});

On voit dans les paramètres le scope, l'élément du DOM concerné, la liste des attributs et un controleur éventuel. Voyons un premier exemple simple :

<div ng-app="monApplication">
	    <div monespace-directive>Cliquez sur moi !</div>
	    <script>
		angular.module('monApplication', []).
	    	directive('monespaceDirective', function () {
				return function(scope, element) {
					element.bind('click', function(){
						alert(element.text());
					})
				}
		});
	    </script>
    </div>
Cliquez sur moi !

Quand on clique sur le texte on reçoit un message d'alerte avec ce même texte. Le paramètre element contient un angular.element. C'est à dire que jQuery est systématiquement utilisé. Si vous avez chargé cette librairie alors vous avez à disposition toutes ses possiblités. Sinon AngularJS possède une version allégée de jQuery dont les méthodes disponibles sont référencées dans le lien précédent. Ici j'ai utilisé bind() et text().

Précédent Suivant

Retour à l'accueil...