AngularJS je m'y mets !

Directives

Voyons un autre exemple de manipulation de l'élément :

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

Cette fois j'ai utilisé deux événements. Quand on passe le curseur de la souris sur le texte celui-ci reçoit la classe text-success avec addClass(), ce qui a pour effet de le colorer en vert. Lorsque le curseur s'éloigne du texte la classe est enlevée avec removeClass() et il retrouve sa couleur normale.

Quelle serait la syntaxe si on avait en plus à préciser une autre propriété, par exemple restrict ? Il faudrait alors utiliser également une propriété link :

<div ng-app="monApplication">
    <monespace-directive>Passez sur moi !</monespace-directive>
    <script>
	angular.module('monApplication', []).
    	directive('monespaceDirective', function () {
    		return {
	    		restrict: 'E',
			link: function(scope, element) {
				element.bind('mouseenter', function(){
					element.addClass('text-success');
				});
				element.bind('mouseleave', function(){
					element.removeClass('text-success');
				});
			}	
		}			
	});
    </script>
</div>
Précédent Suivant

Retour à l'accueil...