Maison > Article > interface Web > 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
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!