Une brève discussion sur la méthode d'implémentation de la liaison bidirectionnelle dans angulaire.js $watch $digest $apply_AngularJS

Fonctionnalités dans Angular.js, liaison bidirectionnelle.

Quelle fonction magique qui permet aux modifications de la vue d'être directement reflétées dans les données. Les modifications des données sont notifiées à la vue en temps réel ?

C'est grâce aux 3 méthodes de portée importantes suivantes :

$regarder
$digérer
$appliquer

Quelles sont leurs différences ? Présentons-les :

$regarder
Il s'agit d'un auditeur qui écoute les données sur le scope

Description de la méthode :

$scope.$watch('参数',function(newValue,oldValue){
 //逻辑处理
})

Nous avons créé un auditeur ci-dessus.
« Paramètre » est un objet (ou un attribut d'un objet) sous l'objet $scope. Notez qu'il est sous forme de chaîne

.

Supposons que vous souhaitiez surveiller la propriété $scope.name.

$scope.$watch('name',function(newValue,oldValue){
 //逻辑处理
})

Comme dans le code ci-dessus, « nom » a besoin de guillemets

Le paramètre est suivi d'une fonction de rappel. Le paramètre de la fonction de rappel renvoie l'attribut surveillé, la nouvelle valeur après la modification et l'ancienne valeur avant la modification précédente.

$digest

Il est chargé de vérifier si les données de la portée ont changé. Si un certain attribut change, il informera immédiatement l'écouteur de cet attribut (l'écouteur enregistré par $watch), déclenchera l'écouteur et exécutera la fonction de rappel. .

$appliquer

Cette méthode est très similaire à $digest, $digest vérifie toutes les données de la portée
$apply équivaut à vérifier toutes les données dans rootScope, il vérifiera toutes les données du parent à l'enfant

$apply() == $rootScope.$digest()

La méthode $apply() a deux formes.

Le premier accepte une fonction en paramètre.
Cela déclenche la fonction $digest et exécute la fonction

dans le paramètre une fois

Le deuxième type n'accepte aucun paramètre.
Cela déclenche simplement un cycle $digest parent-enfant

Dans Angular.js, $digest ne sera pas appelé directement, mais $scope.$apply() est utilisé à la place

Je n'ai pas réglé le moniteur, pourquoi la vue et les données peuvent-elles être liées dans deux directions

Par exemple, une zone de texte ng-model="name"
À l'heure actuelle, il y a en fait un nom d'attribut sous l'objet $scope pour correspondre à la liaison bidirectionnelle avec la vue ci-dessus

Comment y parvenir ?

En fait, quand on définit ng-model="name" ou ng-bind="name" ou {{name}}
À ce stade, angulaire.js définira automatiquement un écouteur pour l'attribut "name" sur le modèle $scope :

$scope.$watch('name', function(newValue, oldValue) {
  //监听 name 属性的变化
});

Il s'avère qu'angular.js nous aide à créer automatiquement un écouteur, donc cette propriété et les données $scope.name seront liées dans les deux sens en temps réel.

Bien sûr, vous constaterez parfois que les données ont changé. Mais l'interface utilisateur n'est pas actualisée. La liaison bidirectionnelle est-elle invalide ?

Non

C'est juste que lorsque le modèle $scope traverse la boucle digest, vos données n'ont pas encore été renvoyées,

Par exemple, lors de l'appel d'une méthode de manière asynchrone, les données renvoyées par callbac

Par exemple, vous définissez une fonction de déclenchement planifiée dans setTimeout, puis modifiez les données du modèle
En bref, le cycle de résumé du modèle $scope a été manqué, ce qui a empêché le modèle de notifier à l'interface utilisateur de s'actualiser en fonction des nouvelles données.

Que dois-je faire si je rencontre un tel problème ?

Nous devons appeler manuellement digest pour vérifier les données dans une boucle afin d'obtenir une liaison bidirectionnelle

Comme nous l'avons dit ci-dessus, n'appelez généralement pas la méthode digest directement, mais appelez manuellement la méthode $apply pour déclencher indirectement la boucle $digest.

Comme suit :

setTimeout(function() {
 $scope.name= '一介布衣';
 $scope.$apply();
}, 2000);

Le problème est là, il est temps d'appeler manuellement la méthode apply

Jusqu'à présent, angulaire.js a automatiquement implémenté la méthode $apply() pour certaines directives et services.

Par exemple, ng-click, ng-model, service $timeout, service $http, etc.

Après l'appel, angulaire.js appellera automatiquement $apply() pour que nous puissions réaliser une liaison de données bidirectionnelle.