AngularJS je m'y mets !

Directives : le scope (scope isolé : symbole =)

Avoir un scope isolé c'est bien mais... le but d'un scope c'est quand même de permettre d'afficher des données. Si le scope est isolé comment lui transmettre des informations ? On va voir dans l'exemple ci-dessous qu'on peut utiliser un attribut de la balise. Pour informer la directive que cet attribut la concerne on va utiliser l'objet qui est défini comme valeur de la propriété scope :

<div ng-app="monApplication" ng-controller="controleur">
	<table class="table table-bordered">
		<caption>Personnes</caption>
		<tr>
			<th class="centrer">Nom</th>
			<th class="centrer">Prénom</th>
		</tr>
		<tr monespace-directive ident="ref01"></tr>
		<tr monespace-directive ident="ref02"></tr>
		<tr monespace-directive ident="ref03"></tr>
    </table>
    <script>
	    angular.module('monApplication', []).
	    controller('controleur', function ($scope) {
	    	$scope.ref01 = { nom: 'Dupont', prenom: 'Jacques' };
	    	$scope.ref02 = { nom: 'Durand', prenom: 'Albert' };
	    	$scope.ref03 = { nom: 'Martin', prenom: 'Léon' };
	    }).
	    directive('monespaceDirective', function () {
	    	return {
		    	scope: {
		    		identite: '=ident'
		    	},
		    	template: '<td>{{identite.nom}}</td><td>{{identite.prenom}}</td>',
		};
	    });
    </script>
</div>
Personnes
Nom Prénom

On définit au niveau du scope créé par le contrôleur 3 variables objets contenant un nom et un prénom. Au niveau de la directive on crée une variable dans le scope isolé nommée identite. Cette variable prend comme valeur celle de la propriété ident que l'on crée au niveau de la balise tr. La directive est utilisée 3 fois, une fois pour chaque personne, pour remplir un tableau. On se retrouve donc avec 3 scopes isolés, chacun de ces scopes ayant une variable identite. Les liserés rouges mettent en évidence les scopes.

Si la propriété du scope isolé a le même nom que l'attribut on peut alors utiliser la syntaxe raccourcie sans préciser le nom de l'attribut :

scope: { identite: '=' },
Précédent Suivant

Retour à l'accueil...