AngularJS je m'y mets !

Les scopes

Nous allons poursuivre notre expérimentation des scopes en modifiant légèrement le code précédent :

<div ng-app>
	<div class="form-group">
		<label for="root">Scope racine</label>
		<input type="texte" class="form-control" id="root" placeholder="Entrez du texte" ng-model="objet.message">
	</div>
	<div class="form-group" ng-controller="Controleur">
		<label for="ctrl">Scope enfant</label>
		<input type="texte" class="form-control" id="ctrl" placeholder="Entrez du texte" ng-model="objet.message">
	</div>
	<script>
		function Controleur($scope) {}
	</script>
<div>

Si vous ne voyez pas la différence je vous le dis. Au lieu de définir une simple variable message j'utilise une propriété d'un objet objet.message. Qu'est-ce que cela change ? Si vous faites les tests comme précédemment vous ne verrez aucune différence dans la première partie : toute saisie dans le premier contrôle entraine le remplissage automatique du second.

C'est la suite qui devient intéressante : si vous entrez du texte dans le second contrôle le premier le suit fidèlement ! Il n'y a aucun moyen de découpler les deux contrôles, sauf si vous commencez votre saisie au niveau du second ! Comment cela se fait-il ? Etant donné qu'il n'y a aucune initialisation dans le code l'objet est créé à la première saisie. Si vous la faite au niveau du scope parent c'est lui qui contient l'objet. Quand vous faites ensuite une saisie au niveau du scope enfant comme l'objet n'est pas trouvé à ce niveau on remonte le chercher dans le scope racine. Par contre si vous commencez la saisie dans le scope enfant l'objet est créé à ce niveau. Lorsque vous faites ensuite une saisie au niveau du scope racine un nouvel objet est créé la aussi et vos deux contrôles sont bien indépendants !

Précédent Suivant

Retour à l'accueil...