AngularJS je m'y mets !

Un petit TP

Il est temps de faire le point sur ce qu'on a vu sur les directives. Je vous propose la réalisation suivante :

Voici tout ça en action :

<div ng-app="monApplication" ng-controller="controleur">
    <div class="panel panel-default">
  		<div class="panel-heading">
    		<h3>Avertissement</h3>
	    </div>
		<div class="panel-body">
			<monespace-liste message="Avertissement" identite="identite" send="envoi(nom, message)"></monespace-directive>
		</div>
	</div>
    <div class="panel panel-default">
  		<div class="panel-heading">
			<h3>Félicitation</h3>
		</div>
		<div class="panel-body">
			<monespace-liste message="Félicitation" identite="identite" send="envoi(nom, message)"></monespace-directive>
		</div>
	</div>
	<monespace-pannel titre="Avertissement"></monespace-pannel>
	<monespace-pannel titre="Félicitation"></monespace-pannel>
    <script>
	    angular.module('monApplication', []).
	    controller('controleur', function ($scope) {
	    	$scope.identite = [
	    		{ nom: 'Dupont', fonction: 'Manager' },
	    		{ nom: 'Durand', fonction: 'Ouvrier' },
	    		{ nom: 'Martin', fonction: 'Ouvrier' },
	    		{ nom: 'Houlie', fonction: 'Ouvrier' },
	    		{ nom: 'Ravino', fonction: 'Manager' },
	    		{ nom: 'Zerben', fonction: 'Ouvrier' }
	    	];
	    	$scope.envoi = function(nom, message){
				alert('Nom : ' + nom + '\nTexte : ' + message);
			};
	    }).
	    directive('monespaceListe', function () {
			return {
				restrict: 'E',
				scope: {
					message: '@',
					identite: '=',
					send: '&'
				},
				template: 'Collaborateur :<select class="form-control" ng-model="personne" ng-options="p.nom group by p.fonction for p in identite"></select>' +
					'Corriger le nom : <input type="text" class="form-control" ng-model="personne.nom"></input>' +
					'<button class="btn btn-default" ng-click="send({nom: personne.nom, message: message})">Envoi !</button>',
				link: function(scope) {
					scope.personne = scope.identite[0];
				}
			};
	    });
    </script>
</div>

Avertissement

Félicitation


L'application n'est évidemment pas très réaliste mais elle présente l'intérêt de présenter diverses façons d'utiliser un scope isolé. Dans ma solution (qui n'est évidemment pas la seule possible) le message est transmis avec un symbole @, c'est un simple texte récupéré au niveau de l'attribut message. Le tableau des personnes est transmis en utilisant le symbole =. remarquez qu'avec ce symbole on obtient une liaison bilatérale qui est mise en évidence lorsqu'on corrige le nom d'une personne. Cette correction est apportée dans le scope de l'autre directive en passant par le scope parent. Enfin la fonction d'envoi du message est passée avec le sybole &.


Retour à l'accueil...