angular.js - Bagaimanakah pengikatan dua hala angularjs dilaksanakan?

Question

Mereka yang telah menggunakan angularjs mesti tahu pengikatan dua halanya, yang sangat mudah digunakan, tetapi bagaimana ia dilaksanakan secara dalaman?

Mengemas kini data apabila paparan berubah adalah mudah difahami, dan kebanyakan orang tahu cara mensimulasikannya Tetapi apabila mengemas kini paparan apabila data berubah, kuncinya terletak pada cara menilai bahawa data telah berubah. . .

Saya memikirkannya sebelum ini, sama seperti menyimpan salinan oldValue dahulu, dan kemudian melintasi ini dengan kerap, membandingkan newValue dengan oldValue dan melakukan kemas kini dan kerja lain yang berkaitan jika ia berubah. . .

Tetapi adakah anda fikir ini okey? Setelah difikirkan lama-lama, saya rasa ianya tidak begitu boleh dipercayai. Saya harap adik-adik semua tidak teragak-agak untuk mengajar saya! ## Tajuk

Answer 1

Melaksanakan contoh mudah yang serupa dengan pengikatan dua hala

HTML

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

SKRIP

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

Lihat perubahan data kemas kini

Ini sangat mudah, cuma ikat acara semasa menyusun arahan myModel

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

Perubahan data UI kemas kini

Terdapat pemerhati dan penghadaman di dalam skop

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);
    });
};

Apabila kami menetapkan nilai pada skop dan mencetuskan ringkasan, UI akan dikemas kini secara serentak

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

Menetapkan nilai kepada skop secara langsung tidak akan mengemas kini UI hanya apabila ringkasan dicetuskan Dalam kebanyakan kes, Angular secara aktif mencetuskan ringkasan untuk kami, yang memberikan gambaran bahawa kami hanya menambah skop ke skop secara bersahaja. Tidak mengapa, tetapi hasilnya adalah situasi yang saya tidak faham. Contohnya

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

Menggunakan setTimeout secara langsung, hasilnya ialah UI tidak dikemas kini Kami perlu melakukan pemprosesan berikut

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

Atau gunakan $masa tamat sudut, yang membantu kami mencetuskan penghadaman

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

Answer 2

Mari cari. Terdapat banyak artikel yang boleh membantu anda menjawab soalan anda dahulu dan kemudian bertanya soalan

Answer 3

Pertama sekali, saya ingin menyatakan bahawa saya tidak begitu biasa dengan angularjs yang disebutkan dalam soalan, yang agak di luar topik.
Kalah mati juga mempunyai ciri pengikatan data dua hala yang sama Ia dilaksanakan dalam mod pemerhatian, apabila memberikan nilai menggunakan kaedah yang ditetapkan, ia juga akan memberitahu pemerhati yang berminat dengan objek tersebut digunakan untuk mencapai kesan pengikatan dua hala data.

Answer 4

angular1 ialah cek kotor. . Ini juga membawa masalah prestasi

Answer 5

Bagaimanakah AngularJS melaksanakan mekanisme pengikatan data dua halanya?

Answer 6

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