AngularJS je m'y mets !

Directives : le scope (scope isolé)

Nous avons vu qu'on peut avoir un scope distinct pour une directive en mettant à true la propriété scope. Mais si le scope est dictinct il n'est pas vraiment isolé. On a vu dans l'exemple précédent qu'on allait chercher le prénom dans le scope parent. Pour avoir un scope vraiment isolé il faut renseigner la propriété scope avec un objet, le plus simple étant de transmettre un objet vide. Voici un exemple :

<div ng-app="monApplication" ng-controller="controleur">
	<div>{{nom}} {{prenom}}</div>
    <div monespace-directive>{{nom}} {{prenom}}</div>
    <script>
	    angular.module('monApplication', []).
	    controller('controleur', function ($scope) {
	    	$scope.nom = 'Dupont';
	    	$scope.prenom = 'Jacques';
	    }).
	    directive('monespaceDirective', function () {
	    	return {
		    	scope: {},
		    	template: '<input type="text" ng-model="nom" placeholder="Entrez un nom ici"> {{nom}}'
		};
	    });
    </script>
</div>
{{nom}} {{prenom}}
{{nom}} {{prenom}}

Le scopes sont encore représentés visuellement par un liseré rouge dans l'exemple. On constate que le scope de la directive ne peut pas accéder au prénom cette fois. Elle ne peut pas non plus initialiser le nom. Si on entre un nom dans la zone de texte c'est juste le scope de la directive qui est actualisé. On a bien un scope parfaitement isolé.

Précédent Suivant

Retour à l'accueil...