Comment utiliser les portées AngularJS

Cette fois, je vais vous montrer comment utiliser le scope AngularJS et quelles sont les précautions d'utilisation du scope AngularJS Ce qui suit est un cas pratique, jetons un coup d'œil.

Introduction au problème

Après avoir utilisé Angular pendant une période de développement, vous rencontrerez essentiellement un gouffre comme celui-ci :

<p ng-controller="TestCtrl">
 <p>{{name}}</p>
 <p ng-if="show">
  <input type="text" ng-model="name">
 </p>
</p>
<script>
function TestCtrl($scope){
  $scope.show = true;
  $scope.name = 'htf';
}
</script>

lie l'élément p et l'élément input à la même variable. Vous auriez pensé que lorsque vous saisissez du contenu dans la zone de saisie, le contenu affiché dans p changera également en conséquence.

Cependant, ce n'est pas le cas. Peu importe la façon dont les éléments de input changent, les éléments de p restent inchangés.

Si nous voulons parler de la raison de cela, nous devons commencer par la portée d'Angular.

Portée

Chaque application angulaire a une portée racine $rootScope par défaut. La portée racine est au niveau supérieur et descend de celui-ci. . Portées suspendues à tous les niveaux.

Normalement, les variables liées par ng-model dans la page sont définies dans le Controller correspondant. Si une variable n'est pas définie dans la portée actuelle, JavaScript recherchera via le prototype du contrôleur actuel, qui est l'héritage de la portée.

Ceci se divise en deux situations.

1. Variables de type de base

<p ng-controller="OuterCtrl">
 <p>{{x}}</p>
 <p ng-controller="InnerCtrl">
  <input type="text" ng-model="x">
 </p>
</p>
<script>
function OuterCtrl($scope){
  $scope.x = 'hello';
}
function InnerCtrl($scope){
}
</script>

Après l'exécution, vous retrouverez le même problème qu'au début de l'article. La zone de saisie à l'intérieur a changé, mais l'extérieur n'a pas changé.

La raison est que la variable InnerCtrl n'est pas définie dans x. Lors de l'obtention de la valeur, elle recherchera le long de la chaîne de prototypes, trouvera le OuterCtrl défini dans x, puis attribuez-le à Lorsque vous entrez une valeur dans la zone de saisie de InnerCtrl, ce qui change est le InnerCtrl dans x, mais n'a aucun effet sur le OuterCtrl dans x. A ce stade, les deux x sont indépendants.

Cependant, si cela ne vous dérange pas, vous pouvez utiliser $scope.$parent pour lier et affecter les variables de base dans la portée supérieure :

<input type="text" ng-model="$parent.x">

2. Types de référence Variables

Et si les scopes de niveau supérieur et inférieur souhaitent partager des variables ?

La réponse est d'utiliser des variables de type référence.

<p ng-controller="OuterCtrl">
 <p>{{x}}</p>
 <p ng-controller="InnerCtrl">
  <input type="text" ng-model="x">
 </p>
</p>
<script>
function OuterCtrl($scope){
  $scope.data = {};
  $scope.data.x = 'hello';
}
function InnerCtrl($scope){
}
</script>

Dans ce cas, les deux data sont la même référence. Les modifications apportées aux propriétés de cet objet peuvent être répercutées sur les objets à deux niveaux.

Portée dans ng-if

Ce dont nous avons parlé plus tôt, c'est la portée entre deux niveaux de contrôleurs , qu'est-ce que est-ce que cela a à voir avec le problème mentionné plus tôt ? Ne semble-t-il pas qu’il n’y ait qu’un seul contrôleur ?

En fait, non seulement le Controller peut créer une portée, mais des directives telles que ng-if généreront également (implicitement) de nouvelles portées.

Pour résumer, ng-if, ng-switch, ng-<a href="http://www.php.cn/wiki/137.html" target="_blank"> Inclure <code>ng-<a href="http://www.php.cn/wiki/137.html" target="_blank">include</a> et d'autres éléments qui créent dynamiquement une interface ont tous leur propre portée de premier niveau.

Par conséquent, dans le processus de développement, afin d'éviter toute ambiguïté variable dans le modèle, vous devez utiliser autant que possible des qualifications de dénomination, telles que data.x, la possibilité d'ambiguïté est bien moindre qu'un . x

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Koa2 pour développer le paiement par numérisation de code QR WeChat

Comment utiliser AngularJS pour implémenter changement d'onglet des pages à onglet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!