Une introduction détaillée à la compréhension de la portée de l'isolation et de la stratégie de liaison dans AngularJS-js tutoriel-php.cn

Une introduction détaillée à la compréhension de la portée de l'isolation et de la stratégie de liaison dans AngularJS

黄舟

Libérer： 2017-06-01 09:36:51

original

1095 Les gens l'ont consulté

Cet article présente principalement la compréhension détaillée de la portée de l'isolement et de la stratégie de liaison dans angular js. Les amis intéressés peuvent s'y référer. >Regardons d'abord l'exemple suivant :

Nous regardons le code dans IsolateScope :

<!doctype html> 
<html ng-app="MyModule"> 
 <head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 </head> 
 <body> 
  <hello></hello> 
  <hello></hello> 
  <hello></hello> 
  <hello></hello> 
 </body> 
 <script src="framework/angular-1.3.0.14/angular.js"></script> 
 <script src="IsolateScope.js"></script> 
</html>

Copier après la connexion

A ce moment, lors de l'exécution de la page, nous constatons que tant que comme là Lorsque l'entrée dans une entrée change, le contenu de toutes les entrées changera :

var myModule = angular.module("MyModule", []); 
myModule.directive("hello", function() { 
 return { 
  restrict: &#39;AE&#39;, 
  template: &#39;<p><input type="text" ng-model="userName"/>{{userName}}</p>&#39;, 
  replace: true 
 } 
});

Copier après la connexion

Cela sera confronté à un problème : nos instructions ne peuvent pas être utilisées seules, il y a donc Introduire la notion de portée indépendante.

En définissant la portée sur {}, chaque commande a son propre espace de portée indépendant, elle ne s'affectera donc pas les unes les autres. Mais le concept le plus important dans Angularjs est : la stratégie de liaison. Il a la stratégie de liaison suivante :

var myModule = angular.module("MyModule", []); 
myModule.directive("hello", function() { 
 return { 
  restrict: &#39;AE&#39;, 
  scope:{}, 
  template: &#39;<p><input type="text" ng-model="userName"/>{{userName}}</p>&#39;, 
  replace: true 
 } 
});

Copier après la connexion

Étape 1 :

Regardons la manière originale, c'est-à-dire ne pas utiliser les trois méthodes de liaison ci-dessus

Regardez le contenu dans ScopeAt :

<!doctype html> 
<html ng-app="MyModule"> 
 <head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 </head> 
 <body> 
 <!--控制器MyCtrl下面有指令drink，同时指令drink还有自定义的属性flavor，其值为‘百威&#39;--> 
  <p ng-controller="MyCtrl"> 
   <drink flavor="{{ctrlFlavor}}"></drink> 
  </p> 
 </body> 
 <script src="framework/angular-1.3.0.14/angular.js"></script> 
 <script src="ScopeAt.js"></script> 
</html>

Copier après la connexion

La structure du DOM à l'heure actuelle est la suivante :

var myModule = angular.module("MyModule", []); 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
 $scope.ctrlFlavor="百威"; 
 //在控制器中$scope中设置了ctrlFlavor属性 
}]) 
//定义了drink指令 
myModule.directive("drink", function() { 
 return { 
  restrict:&#39;AE&#39;, 
  template:"<p>{{flavor}}</p>" , 
   link:function(scope,element,attrs){ 
   scope.flavor=attrs.flavor; 
   //链接的时候把drink指令上的flavor属性放在scope中，然后在template中显示 
   } 
 } 
});

Copier après la connexion

Cependant, this La première façon consiste à obtenir la valeur d'attribut de cette instruction via attrs.flavor, puis vous devez lier cette valeur d'attribut à l'objet scope

Enfin, vous pouvez obtenir la portée dans le modèle via {. {}}. La valeur dans !

Deuxième étape :

Nous utilisons le @ ci-dessus pour remplacer la première méthode, car elle doit spécifier la fonction linkpar elle-même. à chaque fois:

Cette méthode consiste à lier la valeur de l'attribut de saveur dans l'instruction de boisson à l'objet scope, et ceci est automatiquement lié par ng pour nous. Cependant, @binding lie une

var myModule = angular.module("MyModule", []); 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
 $scope.ctrlFlavor="百威"; 
 //在控制器中$scope中设置了ctrlFlavor属性 
}]) 
//定义了drink指令 
myModule.directive("drink", function() { 
 return { 
  restrict:&#39;AE&#39;, 
  scope:{ 
   flavor:&#39;@&#39; 
  }, 
  template:"<p>{{flavor}}</p>" 
 } 
});

Copier après la connexion

chaîne

, pas un objet !

Étape 3 :

Apprenons-en à la liaison de données bidirectionnelle

Jetons un coup d'œil au contenu du contrôleur

<!doctype html> 
<html ng-app="MyModule"> 
 <head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 </head> 
 <body> 
 <!--指定了控制器MyCtrl--> 
  <p ng-controller="MyCtrl"> 
   Ctrl: 
   <br> 
   <!--第一个输入框输入值绑定到ctrlFlavor，也就是控制器MyCtrl对应的ctrlFlavor值中--> 
   <input type="text" ng-model="ctrlFlavor"> 
   <br> 
   Directive: 
   <br> 
   <!--第二个输入框还是通过指令的方式来完成的--> 
   <drink flavor="ctrlFlavor"></drink> 
  </p> 
 </body> 
 <script src="framework/angular-1.3.0.14/angular.js"></script> 
 <script src="ScopeEqual.js"></script> 
</html>

Copier après la connexion

Il s'agit de la méthode de liaison '='. Il implémente une stratégie de liaison de données bidirectionnelle. Jetons un coup d'oeil à quoi ressemble la structure finale du DOM :

var myModule = angular.module("MyModule", []); 
//指定了控制器对象 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
 $scope.ctrlFlavor="百威"; 
}]) 
//指定了指令 
myModule.directive("drink", function() { 
 return { 
  restrict:&#39;AE&#39;, 
  scope:{ 
   flavor:&#39;=&#39; 
   //这里通过&#39;=&#39;指定了drink指令的flavor和scope中的双向数据绑定！ 
  }, 
  template:&#39;<input type="text" ng-model="flavor"/>&#39; 
 } 
});

Copier après la connexion

En fait, la liaison de données bidirectionnelle

Étape 4 :

Nous utilisons la liaison & stratégie pour terminer l'appel de la méthode parent du contrôleur :

Trois instructions de salutation sont définies, chaque instruction doit appeler une méthode sayHello dans le contrôleur (Comment réaliser l'interaction entre le contrôleur et l'instruction dans angulairejs. souligne qu'il peut être transmis. La manière de définir les attributs permet une interaction entre les contrôleurs et les instructions, mais ici nous pouvons compléter la même fonction via un simple &) et transmettre différentes valeurs de nom de paramètre :

<!doctype html> 
<html ng-app="MyModule"> 
 <head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 </head> 
 <body> 
  <p ng-controller="MyCtrl"> 
  <!--接下来是三个自定义的指令greeting指令--> 
   <greeting greet="sayHello(name)"></greeting> 
   <greeting greet="sayHello(name)"></greeting> 
   <greeting greet="sayHello(name)"></greeting> 
  </p> 
 </body> 
 <script src="framework/angular-1.3.0.14/angular.js"></script> 
 <script src="ScopeAnd.js"></script> 
</html>

Copier après la connexion

Il peut être complété via & en appelant la méthode d'action parent au lieu d'utiliser la méthode traditionnelle de spécification des attributs de l'instruction pour terminer la communication entre le contrôleur et l'instruction !

var myModule = angular.module("MyModule", []); 
//为控制器指定了一个sayHello方法，同时为这个方法可以传入一个参数 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
 $scope.sayHello=function(name){ 
  alert("Hello "+name); 
 } 
}]) 
myModule.directive("greeting", function() { 
 return { 
  restrict:&#39;AE&#39;, 
  scope:{ 
   greet:&#39;&&#39;//传递一个来自父scope的函数用于稍后调用，获取greet参数，得到sayHello(name)函数 
  }, 
  //在template中我们在ng-click中指定一个参数，其指定方式为调用controller中greet方法，传入的参数name值为username 
  //也就是ng-model=&#39;userName&#39;中指定的参数 
  template:&#39;<input type="text" ng-model="userName" /><br/>&#39;+ 
     &#39;<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>&#39; 
 } 
});

Copier après la connexion

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!