AngularJS je m'y mets !

Directives

Notre exemple précédent de changement de classe fonctionne bien mais présente un petit défaut : le fait de mettre le nom de la classe directement dans la fonction link. L'idéal serait d'avoir quelque chose du plus modulaire qui accepte n'importe quelle classe comme paramètre. C'est ici que va nous servir le paramètre attrs. On va prévoir pour notre directive un attribut qui va contenir le nom de la classe :

<div ng-app="monApplication">
    <div monespace-directive="text-success">Passez sur moi !</div>
    <script>
	var monModule = angular.module('monApplication', []);
	monModule.directive('monespaceDirective', function () {
		return function(scope, element, attrs) {
			element.bind('mouseenter', function(){
				element.addClass(attrs.monespaceDirective);
			});
			element.bind('mouseleave', function(){
				element.removeClass(attrs.monespaceDirective);
			});					
		}
	});
    </script>
</div>
Passez sur moi !

J'ai complété la déclaration de la directive dans la balise div par un attribut. On a tous les attributs disponibles dans le paramètre attrs.

Précédent Suivant

Retour à l'accueil...