Comment utiliser la portée dans la portée angulaire

Cet article présente principalement l'utilisation spécifique de Angular scope. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil

Scope est le lien entre HTML (vue) et JavaScript (contrôleur).

Scope est un objet avec des méthodes et propriétés disponibles.

Scope peut être appliqué aux vues et aux contrôleurs.

$rootScope

Chaque application AngularJs a une portée racine par défaut - $rootScope La portée racine est en haut et sert de portée parent des autres portées. , peut être utilisé tout au long de l’application.

$scope

scope (scope) correspond au Modèle du mode MVC C'est le lien entre HTML (vue) et JavaScript (contrôleur). S'applique aux vues et aux contrôleurs.

Scope est le contexte dans lequel l'expression est exécutée. En même temps, la portée est également un objet avec les méthodes et propriétés disponibles.

1. Acquisition de valeur et affectation des variables

<p ng-controller="parentCtrl">
 <span>{{number}}</span>
 <p ng-controller="childCtrl">
  <span>{{number}}</span>
  <button ng-click="number = number +1">增加</button>
 </p>
</p>

function parentCtrl($scope){
 $scope.number = 1;
}
function childCtrl($scope){ 
}

Effet :

Deux 1 sont affichés sur l'interface Mais lorsque nous cliquons sur le bouton, les données dans la portée childCtrl changent et les données dans la portée parentCtrl ne changent pas

Analyse :

①La portée childCtrl hérite du Domaine de rôle parentCtrl (similaire à l'héritage de chaîne de prototypes de JavaScript), afin que la portée childCtrl puisse accéder au contenu de parentCtrl.
②Après avoir cliqué sur le bouton, une variable de type de base numérique sera créée dans la portée childCtrl. Lorsque childCtrl a déjà une variable de type de base, elle n'accédera pas à la chaîne de prototypes.

Solution :

①Vous pouvez utiliser $parent pour spécifier les modifications dans la portée supérieure

 <p ng-controller="parentCtrl">
  <span>{{number}}</span>
  <p ng-controller="childCtrl">
   <span>{{number}}</span>
   <button ng-click="$parent.number = number +1">增加</button>
  </p>
 </p>

②Utiliser des variables de type référence, des portées interne et externe Ce sont toutes des références à l'objet de données. La modification des propriétés de l'objet fait toujours référence à la même variable.

 <p ng-controller="parentCtrl">
  <span>{{data.number}}</span>
  <p ng-controller="childCtrl">
   <span>{{data.number}}</span>
   <button ng-click="data.number = data.number +1">增加</button>
  </p>
 </p>
 
 function parentCtrl($scope){
  $scope.data.number = 123&#39;;
 }
 function childCtrl($scope){
  
 }

ng-if, ng-repeat, ng-switch, ng-include et d'autres instructions généreront également de nouvelles portées

Portée dans la directive

.directive("myDirective", function () {
return {
 restrict: "AE",
 scope: {
  name: '@myName',
  age: '=',
  changeAge: '&changeMyAge'
 },
 replace: true,
 template: "<p class=&#39;my-directive&#39;>" +
  "我的名字是：<span ng-bind=&#39;name&#39;></span><br/>" +
  "我的年龄是：<span ng-bind=&#39;age&#39;></span><br/>" +
  "在这里修改名字：<input type=&#39;text&#39; ng-model=&#39;name&#39;><br/>" +
  "<button ng-click=&#39;changeAge()&#39;>修改年龄</button>" +
  " </p>"
}

①scope : false

Lorsque la portée est définie sur false, la directive que nous avons créée partage le même modèle de modèle avec la portée parent (en fait la même portée), donc modifiez les données du modèle dans le directive et cela sera reflété dans le modèle de la portée parent.

②scope : true

Lorsque scope est défini sur true, nous créons une nouvelle portée, mais cette portée est une portée parent héritée, elle peut être comprise de cette façon, notre nouvelle portée La portée créée ; est une nouvelle portée, mais lors de l'initialisation, les propriétés et méthodes de la portée parent sont utilisées pour remplir notre nouvelle portée. Ce n'est pas la même portée que la portée parent.

③scope : {}

@ Il s'agit d'un identifiant de préfixe pour une seule liaison

<p my-directive my-name="{{name}}"></p>

Le nom de l'attribut doit être connecté avec - pour connecter les deux. mots, car il s'agit d'une liaison de données à élément unique en utilisant {{}} pour lier les données.

= Il s'agit d'un identifiant de préfixe de liaison de données bidirectionnelle

<p my-directive age="age"></p>

La liaison bidirectionnelle de données doit être réalisée via l'identifiant de préfixe =, donc {{}} ne peut pas être utilisé.

& Il s'agit d'un identifiant de préfixe d'une méthode de fonction de liaison

<p my-directive change-my-age="changeAge()"></p>

Le nom de l'attribut doit être connecté par - pour connecter plusieurs mots.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter le contrôle des autorisations de menu à l'aide de React

Interprétation détaillée de la façon dont les accessoires transmettent les paramètres dans vue.js

Comment implémenter une requête floue dynamique en entrée

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!