angular.js - 试问angularjs的双向绑定是如何实现的？

Question

用过angularjs的人肯定知道他的双向绑定，用起来也是很方便，可是他内部是怎么实现的呢？

视图变化了去更新数据，这个还好理解，也大都知道怎么去模拟一下，但是说到数据变化了去更新视图，关键在于是怎么去判断数据发生了变化。。。

之前想了一下，类似先存储一份oldValue，然后定时去遍历这些，用newValue和oldValue去对比，如果变化了做更新和其他相关的工作。。。

但是觉得这样行吗？自己思索半天觉得也不是很靠谱，希望各位兄弟姐妹不吝教诲！## 标题

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