AngularJS je m'y mets !

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

Voyons maintenant une autre façon d'utiliser un attribut pour transmettre une donnée à un scope isolé avec le symbole @ :

<div ng-app="monApplication" ng-controller="controleur">
	<table class="table table-bordered">
		<div monespace-directive1 couleur="rouge"></div>
		<div monespace-directive2 couleur="jaune"></div>
    </table>
    <script>
	    angular.module('monApplication', []).
	    controller('controleur', function ($scope) {}).
	    directive('monespaceDirective1', function () {
	    	return {
		    	scope: {
		    		coul: '@couleur'
		    	},
		    	template: 'Couleur : {{coul}}',
		};
	    }).
	    directive('monespaceDirective2', function () {
	    	return {
		    	scope: {
		    		couleur: '@'
		    	},
		    	template: 'Couleur : {{couleur}}',
		};
	    });
    </script>
</div>

Le symbole @ indique qu'on veut récupérer la valeur de l'attribut dont le nom suit, ici couleur. 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, comme je l'ai fait pour la deuxième directive.

Précédent Suivant

Retour à l'accueil...