AngularJS je m'y mets !

Directives : le scope (scope distinct)

Il est possible de créer un nouveau scope avec la déclaration. Il faut utiliser la méthode scope en donnant la valeur true. Par défaut cette propriété est à false. 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: true,
			link: function (scope) {
				scope.nom = 'Durand';
			}
		};
	    });
	</script>
</div>
{{nom}} {{prenom}}
{{nom}} {{prenom}}

Le scopes sont représentés visuellement par un liseré rouge dans l'exemple. On constate qu'il y a effectivement deux scopes. Pour le nom, comme celui-ci est déclaré dans la directive c'est Durand qui est pris. Par contre comme le prénom n'existe pas au niveau du scope de la directive on remonte dans la hiérarchie pour aller chercher Jacques.

Bien qu'on ait un nouveau scope au niveau de la directive, celui-ci est quand même un enfant du scope englobant. On peut donc modifier le nom du parent ainsi :

scope.$parent.nom = 'Durand';
Précédent Suivant

Retour à l'accueil...