angulaire.js - Comment la liaison bidirectionnelle d'AngularJS est-elle implémentée?

Question

Ceux qui ont utilisé Angularjs doivent connaître sa liaison bidirectionnelle, qui est très pratique à utiliser, mais comment est-elle implémentée en interne ?

La mise à jour des données lorsque la vue change est facile à comprendre, et la plupart des gens savent comment la simuler. Mais lorsqu'il s'agit de mettre à jour la vue lorsque les données changent, la clé réside dans la manière de juger que les données ont changé. . .

J'y ai déjà pensé, c'est comme stocker d'abord une copie de oldValue, puis les parcourir régulièrement, comparer newValue avec oldValue et effectuer des mises à jour et d'autres travaux connexes s'ils changent. . .

Mais tu penses que ça va ? Après y avoir longuement réfléchi, j'ai l'impression que ce n'est pas très fiable. J'espère que tous les frères et sœurs n'hésiteront pas à m'apprendre ! ## Titre

Answer 1

Implémentation d'un exemple simple similaire à la liaison bidirectionnelle

HTML

<input id="app" my-model="text" />

SCRIPT

var scope = {};
var input = document.getElementById('app');

Afficher les données de mise à jour des modifications

C'est très simple, il suffit de lier l'événement lors de la compilation de l'instruction myModel

input.addEventListener('input', function (e) {
    scope.text = e.currentTarget.value;
},false);

Les modifications apportées aux données mettent à jour l'interface utilisateur

Il y a des observateurs et des résumés dans la portée

scope.$$watchers = [];
scope.$$watchers.push({
    key:'text',
    fn: function (value) {
        input.value = value;
    }
});

scope.$digest = function () {
    scope.$$watchers.forEach(function (watcher) {
        watcher.fn(scope.text);
    });
};

Lorsque nous attribuons une valeur à la portée et déclenchons le résumé, l'interface utilisateur sera mise à jour simultanément

scope.text ='zzz';
scope.$digest();

L'attribution directe d'une valeur à la portée ne mettra pas à jour l'interface utilisateur. Angular ne mettra à jour l'interface utilisateur que lorsque le résumé est déclenché. Dans la plupart des cas, Angular déclenche le résumé pour nous. la portée à la portée avec désinvolture. C'est bien, mais le résultat est une situation que je ne peux pas comprendre. Par exemple

angular.module('myApp', [])
    .controller('MyCtrl', function ($scope) {
        setTimeout(function () {
            $scope.text = 'zzz';
        }, 1000);
    });
    

L'utilisation directe de setTimeout entraînera la non mise à jour de l'interface utilisateur. Nous devons effectuer le traitement suivant

.

angular.module('myApp', [])
    .controller('MyCtrl', function ($scope) {
        setTimeout(function () {
            $scope.$apply(function () {
                $scope.text = 'zzz';
            });
        }, 1000);
    });
    

Ou utilisez le $timeout d'angular, qui nous aide à déclencher le résumé

angular.module('myApp', [])
    .controller('MyCtrl', function ($scope,$timeout) {
        $timeout(function () {               
            $scope.text = 'zzz';
        }, 1000);
    });

Answer 2

Recherchons. Il existe de nombreux articles qui peuvent vous aider à répondre à vos questions. Recherchez d'abord, puis posez des questions

.

Answer 3

Tout d'abord, je tiens à préciser que je ne connais pas très bien les angulairejs mentionnés dans la question, ce qui est un peu hors sujet.
Knockout a également la même fonctionnalité de liaison de données bidirectionnelle. Elle est implémentée en mode observateur, lors de l'attribution d'une valeur à l'aide de la méthode set, les observateurs intéressés par l'objet seront informés en même temps. Ceci est utilisé pour obtenir l’effet de liaison bidirectionnelle des données.

Answer 4

angular1 est un chèque sale. . Cela entraîne également des problèmes de performances

Answer 5

Comment AngularJS implémente-t-il son mécanisme de liaison de données bidirectionnelle ?

Answer 6

可以参考：
http://teropa.info/build-your-own-angular/build_your_own_angularjs_sample.pdf