AngularJS je m'y mets !

Directives : le scope

Nous allons continuer notre exploration de la création de directives avec les scopes. Avoir une bonne connaissance des scopes est important pour écrire correctement des directives. Prenons un premier exemple simple :

<div ng-app="monApplication" ng-controller="controleur">
    <button monespace-directive class="btn btn-default">Cliquez sur moi</button>
    <script>
	    var monmodule = angular.module('monApplication', []);
	    monmodule.controller("controleur", function ($scope) {
	    	$scope.nombre = 0;
	    });
	    monmodule.directive("monespaceDirective", function () {
		    return function (scope, element) {
			    element.bind("click", function () {
			    	element.text('Vous avez cliqué ' + ++scope.nombre + ' fois !');
			    })
		    }
	    });
    </script>
</div>

Ici j'utilise un contrôleur pour initialiser la variable nombre du scope créé par ce contrôleur. La directive se trouve à l'intérieur du domaine de ce scope. Donc le paramètre scope de la directive est une référence à ce scope. Je peux donc intervenir sur la variable nombre à ce niveau. Le scope est représenté visuellement par un liseré rouge dans l'exemple.


Retour à l'accueil...