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

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 ?

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.

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