Comment utiliser la liaison bidirectionnelle dans AngularJs

Cet article présente principalement le principe de liaison bidirectionnelle d'AngularJs (mécanisme de liaison de données). L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

Alors, qu'est-ce que la liaison bidirectionnelle ? Expliquons-le brièvement ci-dessous ?

Nous devons d’abord comprendre la liaison de données. Les pages du site Web que nous voyons sont composées de deux parties : les données et la conception. Convertir le design dans un langage que le navigateur peut comprendre est ce que font principalement HTML et CSS. Afficher des données sur la page et avoir certains effets interactifs (tels que les clics et autres opérations de l'utilisateur et les réactions de page correspondantes) est la tâche principale de js. Souvent, nous ne pouvons pas actualiser la page (obtenir une demande) à chaque fois que nous mettons à jour des données. Au lieu de cela, nous demandons des données pertinentes au backend et mettons à jour la page (demande de publication) en chargeant sans actualiser. Ensuite, une fois les données mises à jour, l'emplacement correspondant sur la page peut automatiquement apporter les modifications correspondantes, ce qui constitue une liaison de données.

Dans le modèle de développement précédent, cette étape utilise généralement jq pour faire fonctionner la structure DOM afin de mettre à jour la page. Mais cela amène beaucoup de code et beaucoup d’opérations. Si nous pouvons déterminer les opérations qui doivent être effectuées sur la page à partir des données obtenues depuis le backend au début, lorsque les données changent, le contenu pertinent de la page changera également automatiquement, ce qui facilitera grandement le développement du front-end. ingénieurs finaux. Dans le nouveau framework (angualr, réagir, vue, etc.), en surveillant les données, si des changements sont constatés, la page sera modifiée selon les règles qui ont été écrites, réalisant ainsi la liaison des données. On peut voir que la liaison de données est une modification de M (modèle, données) en V (vue) via VM (modèle-vue, la règle de transformation entre les données et les pages).

La liaison bidirectionnelle ajoute un chemin inverse. Lorsque l'utilisateur exploite la page (par exemple en saisissant une valeur dans Entrée), les données peuvent changer dans le temps et, en fonction des changements de données, des modifications correspondantes sont apportées dans une autre partie de la page. Un exemple courant est le panier d'achat sur Taobao. Lorsque la quantité de marchandises change, le prix des marchandises peut également changer dans le temps. Cela permet d'obtenir une liaison bidirectionnelle de V-M-VM-V.

AngularJs définit une file d'attente d'écoute sur le modèle de portée pour écouter les modifications de données et mettre à jour la vue. Chaque fois que vous liez quelque chose à afficher (html), AngularJs insérera un $watch dans la file d'attente $watch pour détecter s'il y a des changements dans le modèle qu'il surveille. La boucle $digest se déclenche lorsque le navigateur reçoit un événement pouvant être géré par le contexte angulaire. $digest parcourra tous les $watches. Mettant ainsi à jour le DOM.

$watch

Ceci est quelque peu similaire à notre modèle d'observateur Dans la portée actuelle $scope, nous créons un moniteur $watchers et un auditeur$ watch, $watchers. sont responsables de la gestion de tous les $watchs. Chaque fois que nous le lions à l'interface utilisateur, nous créerons automatiquement un $watch et le placerons dans $watchers.

controller.js

app.controller('MainCtrl', function($scope) {
 $scope.Hello = "Hello";
 $scope.world = "World";
});

index.html

<p>{{Hello}}</p>

Ici, même si on ajoute deux variables sur $scope,

$digest

est généré ici lorsque le navigateur le reçoit Lorsqu'un événement est géré par le contexte angulaire, la boucle $digest est déclenchée. $digest traversera nos $watches. S'il n'y a aucun changement dans $watch, la détection de boucle s'arrêtera si au moins une a été mise à jour, la boucle sera à nouveau déclenchée jusqu'à ce que toutes les $watches n'aient aucun changement. Cela garantit que chaque modèle ne changera plus. Il s'agit du mécanisme Dirty Checking

controller.js

app.controller('MainCtrl', function() {
 $scope.name = "Foo";

 $scope.changeFoo = function() {
  $scope.name = "Bar";
 }
});

index.js

<p>{{ name }}</p>
<button ng-click="changeFoo()">Change the name</button>

1. quand on appuie sur le bouton

2. Le navigateur reçoit un événement et entre dans le contexte angulaire.

3. La boucle $digest commence à s'exécuter, demandant si chaque $watch change.

4. Étant donné que $watch surveillant $scope.name signale un changement, il forcera un autre cycle $digest.

5. Nouvelle boucle $digest sans aucun changement détecté.

6. Mise à jour la partie du DOM correspondant à la nouvelle valeur de $scope.name.

$apply

$apply Nous pouvons directement le comprendre comme un rafraîchissement de l'interface utilisateur. Si vous appelez $apply lorsque l'événement est déclenché, il entrera dans le contexte angulaire. S'il n'est pas appelé, il n'entrera pas et le mécanisme de détection $digest ultérieur ne déclenchera pas

app.directive('clickable', function() {
 return {
  restrict: "E",
  scope: {
  foo: '='
  },
  template: &#39;<ul style="background-color: lightblue"><li>{{foo}}</li></ul>&#39;,
  link: function(scope, element, attrs) {
  element.bind(&#39;click&#39;, function() {
   scope.foo++;
   console.log(scope.foo);
  });
  }
 }
});

Quand on appelle l'instruction cliquable, on voit que la valeur de foo a augmenté, mais le contenu affiché sur l'interface n'a pas changé. Le mécanisme de détection sale de $digest n'est pas déclenché et le foo de détection de $watch n'est pas exécuté.

Deux formes de méthode $apply()

1) Aucun paramètre

$scope.$apply();

element.bind('click', function() {
 scope.foo++;
 //if error
 scope.$apply();
});

Lorsque nous utilisons ce formulaire, s'il est dans la portée, une exception se produit dans. le programme avant $apply, alors scope.$apply n'est pas exécuté et l'interface ne sera pas mise à jour

2) S'il y a des paramètres

$scope.$apply(function(){
 ...
})

element.bind('click', function() {
 scope.$apply(function() {
  scope.foo++;
 });
})

Si vous utilisez ceci formulaire, même s'il est utilisé ultérieurement. Si une exception se produit, les données seront quand même mises à jour.

Utilisation de $watch dans AngularJS

Utilisation courante :

$scope.name = 'Hello';
$scope.$watch('name', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
});

传入到$watch()中的第二个参数是一个回调函数，该函数在name的值发生变化的时候会被调用。

如果要监听的是一个对象，那还需要第三个参数：

$scope.data.name = 'Hello';
$scope.$watch('data', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
}, true);

表示比较的是对象的值而不是引用，如果不加第三个参数true，在 data.name 变化时，不会触发相应操作，因为引用的是同一引用。

总结

1) 只有在$scope变量绑定到页面上，才会创建 $watch

2) $apply决定事件是否可以进入angular context

3) $digest 循环检查model时最少两次，最多10次(多于10次抛出异常，防止无限检查)

4) AngularJs自带的指令已经实现了$apply，所以不需要我们额外的编写

5) 在自定义指令时，建议使用带function参数的$apply

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在javaScript中如何使用手机号码校验工具类PhoneUtils

在微信小程序中如何实现下载进度条

在微信小程序中如何使用video组件播放视频

在微信小程序中如何使用audio组件

在微信小程序中有关功能函数总结（详细教程）

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!