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, nouscréerons automatiquement un $watch et le placerons dans $watchers.

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

{{Hello}}

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

{{ name }}
 Change the name

app.directive('clickable', function() { return { restrict: "E", scope: { foo: '=' }, template: '
{{foo}}
', link: function(scope, element, attrs) { element.bind('click', function() { scope.foo++; console.log(scope.foo); }); } } });

$scope.$apply();

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

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

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

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

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