Memahami Angular ' s $ apply () dan $ Digest ()

Mencari latihan angularjs dalam talian terkemuka? Semak Ultimate Angular oleh Todd Moto. Gunakan Kod SitePoint untuk diskaun dan sokongan 25% SITEPOINT!

fungsi angularjs

dan $apply() adalah asas, namun kadang -kadang mengelirukan, unsur -unsur. Menguasai mereka adalah kunci untuk memahami kerja dalaman AngularJS. Artikel ini menjelaskan peranan dan aplikasi praktikal mereka dalam perkembangan angularjs setiap hari. $digest()

Takeaways utama:

• dan $apply() adalah penting untuk mengikat data dua hala AngularJS, memastikan kemas kini yang lancar antara pandangan dan model skop. $digest()
• memulakan kitaran $apply() pada tahap $digest, melintasi semua skop kanak -kanak dan melaksanakan pemerhati. Angularjs secara automatik memanggilnya apabila perubahan model berlaku dalam konteksnya. $rootScope
Penyerahan manual
• diperlukan apabila pengubahsuaian model berlaku di luar konteks AngularJS (mis., Menggunakan $apply() atau pendengar acara DOM). Ini memberi isyarat angularjs untuk mengemas kini pemerhati dan menyebarkan perubahan dengan betul. setTimeout()
Gelung
• meleleh beberapa kali, mengesahkan perubahan model skop. Ia berterusan sehingga tiada perubahan selanjutnya dikesan atau had lelaran maksimum (10) dicapai. $digest

menyelam mendalam ke dan $apply(): $digest()

mengikat data dua hala AngularJS adalah ciri yang kuat. Perubahan dalam paparan secara automatik mengemas kini model skop, dan sebaliknya. Keajaiban ini berlaku kerana AngularJS menetapkan pemerhati pada model skop. Pengamat ini, serupa dengan pemerhati tersuai:

$scope.$watch('aModel', function(newValue, oldValue) {
  // Update the DOM with newValue
});

Jalankan fungsi pendengar setiap kali

perubahan. Soalan penting ialah: aModel bagaimana angularjs tahu bila hendak memanggil fungsi pendengar ini?

Jawapannya ialah kitaran

. Kitaran ini mencetuskan pemerhati. Apabila kebakaran pemerhati, AngularJs menilai model skop; Sekiranya perubahan dikesan, fungsi pendengar yang sepadan berjalan. $digest

kitaran dimulakan oleh

. Sebagai contoh, jika anda mengubah suai model skop dalam pengendali $digest, AngularJS secara automatik memanggil $scope.$digest(). Ini memulakan kitaran, menembak semua pemerhati dan mengemas kini pandangan dengan sewajarnya. Arahan/Perkhidmatan Lain (mis., ng-click, $digest()) Juga mencetuskan ng-model kitaran. $timeout Walau bagaimanapun, AngularJS tidak langsung memanggil

. Sebaliknya, ia menggunakan $digest(), yang sebaliknya memanggil $scope.$apply(). Ini memastikan kitaran $rootScope.$digest() bermula pada akar dan menyebarkan melalui skop kanak -kanak. Apabila anda menggunakan $digest dengan fungsi, AngularJS membungkus panggilan fungsi dalam ng-click. $scope.$apply()

datang dalam dua bentuk: seseorang menerima fungsi sebagai argumen (pilihan), dan versi tidak ada argumen yang hanya memulakan kitaran $apply(). $digest

Manual Invocation: $apply()

Bilakah manual

perlu? AngularJS hanya menyumbang kepada perubahan model yang dibuat $apply() dalam konteksnya (iaitu, kod yang dibungkus dalam ). Arahan terbina dalam mengendalikan ini secara automatik. Tetapi, jika anda mengubah suai model di luar konteks AngularJS, anda mesti memanggil secara manual $apply() untuk memaklumkan angularjs tentang perubahan. $apply()

Sebagai contoh, menggunakan

untuk mengemas kini model skop memerlukan manual setTimeout(): $apply()

$scope.$watch('aModel', function(newValue, oldValue) {
  // Update the DOM with newValue
});

tanpa

, pandangan tidak akan dikemas kini. Lebih suka $apply() untuk ini, kerana ia mengendalikan $timeout secara automatik. Versi argumen fungsi $apply() adalah yang terbaik, kerana ia menggunakan blok $apply() untuk mengendalikan pengecualian melalui try...catch. $exceptionHandler

lelaran gelung: $digest

Gelung

berjalan berulang kali, memeriksa perubahan model. Jika fungsi pendengar mengubah model, gelung dimulakan semula untuk mengambil kira perubahan ini. Ini berterusan sehingga tiada perubahan yang dijumpai atau kiraan lelaran maksimum (10) dicapai. Bertujuan untuk fungsi pendengar idempotent untuk meminimumkan lelaran gelung. $digest

Kesimpulan:

pemahaman

dan $apply() adalah penting untuk perkembangan angularjs yang berkesan. Ingatlah untuk memanggil secara manual $digest() apabila membuat perubahan model di luar konteks AngularJS. Gunakan $apply() apabila mungkin untuk mengelakkan panggilan $timeout manual. $apply()

(bahagian Soalan Lazim dikeluarkan untuk keringkasan. Soalan Lazim yang disediakan berulang dan sebahagian besarnya diliputi dalam badan utama teks yang ditulis semula.)

Atas ialah kandungan terperinci Memahami Angular ' s $ apply () dan $ Digest (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!