1. Apa itu ruang lingkup?
Scope (http://code.angularjs.org/1.0.2/docs/api/ng.$rootscope.scope) adalah objek yang menunjuk ke model aplikasi. Ini juga merupakan konteks eksekusi ekspresi (http://www.cnblogs.com/lclao/archive/2012/09/16/2687162.html). Lingkup ditempatkan dalam hierarki struktur DOM yang mirip dengan aplikasi. SCOPE dapat memantau (menonton, $ watch) Ekspresi dan acara propagasi.
2. Karakteristik ruang lingkup
3. Lingkup sebagai Data-Model (Lingkup sebagai Model Data)
Lingkup adalah tautan antara pengontrol aplikasi dan tampilan. Dalam Tahap Template Linking (http://www.cnblogs.com/lclao/archive/2012/09/04/2669802.html), arahan (http:/www.cnblogs.com/lclao/archive/2012/09/09/09/09/llogs.com/lclao/archive/2012/09/09/09/09/09/09/09/lclogs.com/lclao/archive/2012/09/09/09/cnblogs.com/lclao/archive/2012/09/09/cnblogs.com ruang lingkup. $ Watch memungkinkan Directive untuk mengetahui perubahan atribut, jadi arahan menjadikan nilai yang diperbarui ke DOM.
Baik pengontrol dan arahan memiliki referensi ke ruang lingkup, tetapi tidak satu sama lain. Pengaturan ini memisahkan pengontrol dari arahan dan DOM. Ini adalah tempat yang penting karena mengisolasi pengontrol dari pandangan, sangat meningkatkan kisah pengujian aplikasi.
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <itement> Data-model </title> <style type = "text/css"> .ng-cloak {display: none; } </style></head><body><div ng-controller="MyController"> Your name: <input type="text" ng-model="username"/> <button ng-click="sayHello()">Welcome</button> <hr/> {{greeting}}</div><script src="../angular-1.0.1.js" type = "Text/JavaScript"> </script> <script type = "text/javascript"> function mycontroller ($ scope) {$ scope.username = "my little dada"; $ scope.sayhello = function () {$ scope.greeting = "hello ~" + $ scope.username + "!"; }; } </script> </body> </html>Dalam contoh di atas kita dapat melihat bahwa MyController menetapkan atribut nama pengguna dalam ruang lingkup dengan "My Little Dada". Kemudian, ruang lingkup memberi tahu input untuk penugasan dan pra-pengisian nilai nama pengguna ke dalam input. Ini menunjukkan bagaimana pengontrol dapat menulis data ke dalam ruang lingkup.
Demikian pula, pengontrol dapat melampirkan perilaku ke ruang lingkup, seperti metode Sayhello yang dipicu ketika pengguna mengklik tombol "Selamat datang". Metode Sayhello dapat membaca atribut nama pengguna atau membuat atribut ucapan. Ini menunjukkan bahwa ketika mereka terikat pada kontrol input HTML, properti dalam ruang lingkup secara otomatis diperbarui.
Secara logis, menampilkan {{ucapan}} melibatkan dua poin berikut:
Cari ruang lingkup dengan node dom template yang mendefinisikan ekspresi {{ucapan}}. Dalam contoh ini, ruang lingkup ini sama dengan ruang lingkup yang ditularkan ke MyController. (Kami akan membahas hierarki lingkup nanti)
Ekspresi ucapan dievaluasi melalui ruang lingkup yang diambil sebelumnya, dan hasilnya kemudian digunakan sebagai nilai teks yang menutupi elemen DOM.
Kita dapat berpikir bahwa ruang lingkup dan propertinya sendiri dapat digunakan sebagai data untuk memberikan tampilan. Lingkupnya adalah sumber kebenaran tunggal untuk semua hal yang terkait dengan tampilan.
Dari perspektif testability, pemisahan pengontrol dan tampilan senang, karena memungkinkan kita untuk (fokus) perilaku pengujian tanpa gangguan rendering rincian.
itu ('harus menyapa', function () {var scopemock = {}; var cntl = myController baru (scopemock); // menyatakan bahwa nama pengguna adalah harapan pre-filled (scopemock.username) .toequal ('world'); // menegaskan bahwa kita membaca nama baru dan scopemock.usname. harapkan (scopemock.greeting) .toequal ('Hello angular!');});4. Hirarki Lingkup (Hierarki Lingkup)
Setiap aplikasi sudut memiliki dan hanya satu lingkup root, tetapi dapat memiliki banyak lingkup anak.
Suatu aplikasi dapat memiliki banyak lingkup anak, karena beberapa arahan akan membuat lingkup anak baru (lihat dokumentasi arahan untuk melihat arahan mana yang dapat membuat lingkup baru, seperti NG-repeat). Ketika ruang lingkup baru dibuat, mereka akan ditambahkan ke ruang lingkup induk sebagai ruang lingkup anak. Dengan cara ini, struktur pohon yang mirip dengan DOM yang dilampirkan dibuat.
Ketika Angular mengevaluasi {{username}}, pertama -tama melihat properti nama pengguna dari ruang lingkup yang terkait dengan elemen saat ini. Jika tidak ada properti yang sesuai ditemukan, ia akan mencari di atas untuk ruang lingkup induk sampai mencapai ruang lingkup root. Dalam JavaScript, perilaku ini disebut "prototipe warisan", dan ruang lingkup anak biasanya diwarisi dari orang tua mereka.
Contoh ini menunjukkan ruang lingkup (apa itu) dan pewarisan prototipe properti dalam aplikasi.
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <itement> scope-hierarchies </itement> <style type = "text/css"> .ng-cloak {display: none; } .ng-scope {border: 1px putus-putus merah; } </tyle> </head> <body> <v ng ng-controller = "mycontroller"> manager: {{{{{{} {{{{department {department} {{{{{{{{{li] {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{ </ul> <hr/> {{ucapan}} </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function mycontroller ($ scope) {$ scope.department = "a tertentu ($ scope"; $ scope.employee = {name: "my little dada", lapor: [{name: "lclao"}, {name: "Who^o^"}]}; } </script> </body> </html>Perhatikan bahwa Angular secara otomatis menempatkan kelas NG-SCOPE ke dalam elemen-elemen yang melekat pada ruang lingkup. <tyle> didefinisikan dalam contoh di atas, menyoroti kisaran ruang lingkup baru melalui garis putus -putus merah. Karena Repeater mengevaluasi ekspresi {{{{{{{{{{{{{}}, diperlukan ruang lingkup anak, tetapi tergantung pada ruang lingkup ekspresi mana yang dievaluasi, lingkup yang berbeda memiliki hasil yang berbeda. Demikian pula, nilai {{department}} diwarisi dari prototipe dalam lingkup root. Hanya ketika ada, atribut departemen dapat didefinisikan.
5. Mengambil lingkup dari DOM (mengambil lingkup dari DOM)
Lingkup dilampirkan ke DOM sebagai atribut data $ SCOPE dan dapat digunakan untuk pengambilan untuk tujuan debugging. (Tidak mungkin untuk mengambil ruang lingkup dengan cara ini dalam aplikasi.) Lokasi lingkup root yang terpasang pada DOM ditentukan oleh lokasi arahan NG-APP. Biasanya NG-App ditempatkan di elemen <Html>, tetapi juga dapat ditempatkan di elemen lain, misalnya, hanya sebagian dari tampilan yang perlu dikontrol oleh sudut.
Lihat ruang lingkup di debugger:
1. Di browser, klik kanan elemen yang Anda minati dan pilih "View Element". Kita dapat melihat bahwa debugger browser menyoroti elemen yang kami pilih.
2. Debugger memungkinkan kami untuk mengakses elemen yang saat ini dipilih melalui variabel $ 0 di konsol.
3. Jika Anda ingin melihat ruang lingkup yang terkait, kami dapat masuk: Angular.element ($ 0) .scope () di konsol
6. Propagasi Acara Lingkup (Propagasi Acara Lingkup)
Lingkup dapat menyebarkan peristiwa dengan cara yang mirip dengan peristiwa DOM. Acara dapat disiarkan (http://code.angularjs.org/1.0.2/docs/api/ng.$rootscope.scope#$broadcast) ke ruang lingkup anak atau emit (http://code.angularjs.org/1.0.2/docss/api. (Jika ruang lingkup saat ini didengarkan, itu juga akan dieksekusi)
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> scope-event-propagation </itement> <style type = "text/css"> .ng-cloak {display: Tidak Ada; } </tyle> </head> <body> <v ng-controller = "mycontroller"> jumlah lingkup root: {{count}} <ul> <li ng-repeat = "i in [1]" Ng-Controller = "myController"> <kancing ng-klip = "$ emit ('myevent =" mycontroller "> ng-click = "$ siaran ('myevent')"> $ siaran ("myevent") </button> <br/> jumlah lingkup tengah: {{count} <ul> <li ng-repeat = "item di [1,2]" ng-controller = "mycontroller"> count count </{{li-controller = "myController"> count </{{li-controller = </ul> </div> <skrip src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function mycontroller ($ scope) {$ scope.count = 0; $ scope. $ on ("myevent", function () {$ scope.count ++;}); } </script> </body> </html>7. Siklus hidup lingkup (siklus hidup lingkup)
Dalam aliran acara normal browser, ketika browser menerima acara, itu akan menjalankan panggilan balik JavaScript yang sesuai. Setelah fungsi callback dieksekusi, browser akan menggambar ulang DOM dan kembali ke negara bagian di mana Anda terus menunggu acara tersebut.
Ketika browser memanggil kode JavaScript di luar lingkungan eksekusi sudut, ini berarti bahwa Angular tidak tahu perubahan model. Untuk menangani modifikasi model dengan benar, perintah ini harus memasuki lingkungan eksekusi sudut dengan membuat metode $ apply. Hanya ketika model berubah dalam metode $ Apply akan dihitung dengan benar oleh Angular. Misalnya, arahan mendengarkan acara DOM, seperti NG-klik, yang harus mengevaluasi ekspresi dalam metode $ Apply.
Setelah mengevaluasi ekspresi, metode $ Apply mengeksekusi $ digest. Pada tahap $ Digest, ruang lingkup memeriksa semua ekspresi yang didengarkan oleh $ watch, dan membandingkan nilai saat ini dengan nilai lama. Pemeriksaan kotor tidak sinkron. Ini berarti bahwa pernyataan penugasan (misalnya, $ scope.username = "angular") tidak akan segera menyebabkan $ watch diberitahu, tetapi pemberitahuan $ watch akan ditunda ke tahap $ digest. Penundaan ini diperlukan karena menggabungkan beberapa pembaruan model menjadi pemberitahuan $ Watch, yang memastikan bahwa tidak ada $ Watch lain yang dieksekusi selama proses pemberitahuan $ Watch. Jika A $ Watch mengubah nilai model, itu akan memaksa peningkatan siklus $ digest.
1) Kreasi (Buat lingkup)
Root scope dibuat oleh $ injector (http://code.angularjs.org/1.0.2/docs/api/auto.$injector) selama proses startup aplikasi. Selama proses penghubung template, beberapa arahan akan membuat ruang lingkup anak baru.
2) Pendaftaran Pengamat (Daftar Pengamat)
Selama proses menghubungkan template, arahan mendaftar $ watch in scope. Jam tangan ini akan digunakan sebagai nilai menyebarkan model ke DOM.
3) Model mutasi (perubahan model)
Agar perubahan dapat dideteksi dengan benar, kita perlu membungkusnya dalam ruang lingkup. $ Apply. (API Angular telah melakukan ini secara implisit, jadi ketika melakukan pekerjaan sinkron di pengontrol atau pekerjaan asinkron dengan $ http atau $ timeout, tidak diperlukan tambahan $ aplikasi aplikasi).
4) Pengamatan mutasi (perubahan pemantauan)
Pada akhir $ Apply, Angular akan menjalankan siklus $ Digest dalam lingkup root, yang akan merambat ke semua lingkup anak. Dalam siklus $ Digest, semua ekspresi atau fungsi yang terdaftar dengan $ Watch akan diperiksa untuk menentukan apakah model telah berubah. Jika perubahan terjadi, pendengar $ watch yang sesuai akan dipanggil.
5) Penghancuran Lingkup (Penghancuran Lingkup)
Ketika ruang lingkup anak tidak lagi diperlukan, itu adalah tanggung jawab produsen ruang lingkup anak untuk menghancurkan mereka melalui ruang lingkup. $ Destroy () API. Ini akan menghentikan propagasi panggilan $ digest ke dalam ruang lingkup anak, sehingga memori yang digunakan oleh model lingkup anak dapat didaur ulang oleh GC (pengumpul sampah).
1. Lingkup dan Arahan
Selama fase kompilasi, kompiler bergantung pada arahan pencocokan template DOM. Arahan biasanya dapat dibagi menjadi dua kategori:
Mengamati arahan, seperti ekspresi dobule-curly {{ekspresi}}, daftarkan pendengar menggunakan metode $ watch. Setiap kali ekspresi (nilai) berubah, arahan tersebut harus diberi tahu untuk memperbarui tampilan.
Petunjuk pendengar, seperti NG-klik, mendaftarkan pendengar ke dalam DOM. Ketika pendengar DOM menyala, Arahan menjalankan ekspresi yang relevan dan memperbarui tampilan dengan menggunakan metode $ Apply.
Ketika peristiwa eksternal (seperti tindakan pengguna, pengatur waktu, atau XHR) didengar, ekspresi yang relevan harus diterapkan pada ruang lingkup melalui metode $ Apply, sehingga semua pendengar dapat diperbarui dengan benar.
2. Arahan yang membuat lingkup
Dalam kebanyakan kasus, arahan dan ruang lingkup saling mempengaruhi, tetapi tidak ada contoh lingkup baru yang dibuat. Namun, beberapa arahan (seperti NG-Controller dan NG-RePeat) membuat ruang lingkup baru, menambahkan ruang lingkup anak ke elemen DOM yang sesuai. Kami melihat ruang lingkup elemen DOM apa pun dengan menggunakan angular.element (adomelement) .scope ().
3. Pengontrol dan Lingkup
Dalam kasus berikut, ruang lingkup dan pengontrol saling mempengaruhi:
4. SCOPE $ WATCH PERTIMBANGAN KINERJA (SCOPE $ WATCH PERSAMAAN KINERJA)
Dalam Angular, ini adalah operasi umum untuk melakukan pemeriksaan kotor pada ruang lingkup untuk mendeteksi perubahan atribut. Untuk melakukan ini, ini mensyaratkan bahwa fungsi giro yang kotor harus efisien. Berhati -hatilah karena fungsi giro yang kotor tidak melakukan operasi akses DOM, karena akses DOM adalah pesanan besarnya lebih lambat daripada mengakses properti objek JavaScript.
Di atas adalah informasi tentang lingkup AngularJS. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!