AngularJS je m'y mets !

Les contrôleurs et la directive ngChange

Nous avons vu un premier exemple élémentaire de contrôleur pour comprendre l'architecture du système. On a vu que le contrôleur peut créer le modèle et renseigner le scope. Une autre fonction du contrôleur est aussi d'ajouter des comportements. Imaginez que vous avez une zone de saisie de texte et que vous voulez connaître en permanence le nombre de mots contenus dans le texte saisi. Voici comment réaliser cela :

<div ng-app ng-controller="Controleur">
	<textarea class="form-control" rows="3" ng-model="texte" ng-change="changement()"></textarea>
	Nombre de mots : {{nombre}}
	<script>
		function Controleur($scope) {
			$scope.nombre = 0;
			$scope.changement = function() {
				$scope.nombre = $scope.texte.split(/\b\w+\b/).length-1;
			};
		}
	</script>
</div>
Nombre de mots : {{nombre}}

Le code utilise une nouvelle directive : ngChange. Elle permet la mise en place d'une écoute de l'évenement de changement dans le contrôle. Donc dès que le texte change au niveau du contrôle textarea on va appeler la fonction désignée changement(). Cette fonction compte le nombre de mots et met à jour la propriété nombre du scope, l'expression {{nombre}} est alors actualisée.

Pour avoir une visualisation de cette organisation voici un petit schéma inspiré de la documentation :

Précédent

Retour à l'accueil...