Perbincangan ringkas tentang kaedah melaksanakan pengikatan dua hala dalam angular.js $watch $digest $apply_AngularJS

Ciri dalam Angular.js, pengikatan dua hala.

Apakah fungsi ajaib yang membolehkan perubahan dalam paparan dicerminkan secara langsung dalam data Perubahan dalam data dimaklumkan kepada paparan dalam masa nyata.

Ini adalah terima kasih kepada 3 kaedah skop penting berikut:

$watch
$digest
$apply

Apakah perbezaan mereka? Mari perkenalkan mereka:

$watch
Ini ialah pendengar yang mendengar data pada skop

Penerangan kaedah:

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

Kami mencipta pendengar di atas.
'Parameter' ialah objek (atau atribut objek) di bawah objek $scope. Ambil perhatian bahawa ini dalam bentuk rentetan

Andaikan anda ingin memantau sifat $scope.name.

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

Seperti dalam kod di atas, 'nama' memerlukan petikan

Parameter diikuti dengan fungsi panggil balik Parameter fungsi panggil balik mengembalikan atribut yang dipantau, nilai baharu selepas perubahan dan nilai lama sebelum perubahan sebelumnya.

$digest

Dia bertanggungjawab untuk menyemak sama ada data dalam skop telah berubah Jika atribut tertentu berubah, ia akan segera memberitahu pendengar atribut ini (pendengar yang didaftarkan oleh $watch), mencetuskan pendengar dan melaksanakan fungsi panggil balik. .

$mohon

Kaedah ini hampir sama dengan $digest, $digest menyemak semua data dalam skop

$apply adalah bersamaan dengan menyemak semua data dalam rootScope, ia akan menyemak semua data daripada ibu bapa kepada anak

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

Kaedah $apply() mempunyai dua bentuk.

Yang pertama menerima fungsi sebagai parameter.

Ini mencetuskan fungsi $digest dan melaksanakan fungsi
dalam parameter sekali

Jenis kedua tidak menerima sebarang parameter.

Ini hanya mencetuskan kitaran $digest ibu bapa kepada anak

Dalam Angular.js, $digest tidak akan dipanggil secara langsung, tetapi $scope.$apply() digunakan sebaliknya

Saya tidak menetapkan monitor, kenapa paparan dan data boleh terikat dalam dua arah

Contohnya, kotak teks ng-model="name"

Pada masa ini, sebenarnya terdapat nama atribut di bawah objek $scope untuk sepadan dengan pengikatan dua hala dengan paparan di atas

Bagaimana untuk mencapainya?

Malah, apabila kita mentakrifkan ng-model="name" atau ng-bind="name" atau {{name}}

Pada masa ini, angular.js secara automatik akan menetapkan pendengar untuk atribut "nama" pada model $scope:

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

Nampaknya angular.js membantu kami membuat pendengar secara automatik, jadi sifat ini dan data $scope.name akan terikat dua hala dalam masa nyata.

Sudah tentu, kadangkala anda akan mendapati bahawa data telah berubah Tetapi UI tidak dimuatkan semula Adakah pengikatan dua hala tidak sah?

Tidak

Cuma apabila model $scope melintasi gelung digest, data anda belum dikembalikan lagi,

Sebagai contoh, apabila memanggil kaedah secara tidak segerak, data dikembalikan oleh callbac

Sebagai contoh, anda menetapkan fungsi pencetus yang dijadualkan dalam setTimeout, dan kemudian mengubah suai data model

Ringkasnya, kitaran ringkasan model $scope telah terlepas, menyebabkan model tidak memberitahu UI untuk memuat semula mengikut data baharu.

Apakah yang perlu saya lakukan jika saya menghadapi masalah sedemikian?

Kami perlu memanggil ringkasan secara manual untuk menyemak data dalam satu gelung untuk mencapai pengikatan dua hala

Seperti yang telah kami katakan di atas, biasanya tidak memanggil kaedah digest secara langsung, tetapi secara manual memanggil kaedah $apply untuk secara tidak langsung mencetuskan gelung $digest.

Seperti berikut:

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

Masalahnya di sini, sudah tiba masanya untuk memanggil kaedah memohon secara manual

Setakat ini, angular.js telah melaksanakan kaedah $apply() secara automatik untuk beberapa arahan dan perkhidmatan.

Contohnya, ng-click, ng-model, perkhidmatan $timeout, perkhidmatan $http, dsb.

Selepas memanggil, angular.js akan memanggil $apply() secara automatik untuk kami mencapai pengikatan data dua hala.