Lingkup sudut
Dalam aplikasi web yang dibangun dengan Angular, konsep ruang lingkup ada di seluruh itu. Banyak instruksi dalam tampilan sudut akan membuat ruang lingkup, seperti NG-App, NG-Controller, dll. Lingkup ini adalah $scope (versi sebelum Angular1.2) kami menyuntikkan saat menulis konstruktor pengontrol. Ini adalah konsep dalam model tampilan. Model data kami didefinisikan dalam ruang lingkup.
Lubang lingkup sudut
Orang-orang yang menggunakan Angular harus melalui proses, yaitu, ketika mereka adalah seorang pemula di awal, mereka hanya melihat pengikatan data dua arah.
SCOPE PIT 1 DALAM SANGULE
Tidak peduli bagaimana dia mulai menggunakannya secara langsung, dia akan mengikatnya dalam sekali jalan. Setelah mengikat, jika Anda beruntung (burung tua yang memahami prinsip lingkup sudut mengabaikannya), maka ikatan dua arah akan mulai bekerja seperti yang diharapkan. Pada saat ini, kami juga merasa bahwa kami sangat kuat sehingga kami dapat menyadari "ikatan dua arah" begitu cepat, yang merupakan fitur baru yang belum pernah didengar.
Jadi mengapa hal di atas mengatakan bahwa pengikatan dua arah berfungsi dengan baik karena keberuntungan? Karena ketika pemula pertama kali mulai belajar Angular, mereka hanya membaca tutorial dan mengubah kode untuk mencapai kebutuhan bisnis mereka. Bahkan jika ada beberapa pemain yang dapat mempelajari dokumen resmi di awal, mereka masih minoritas. Oleh karena itu, sebagian besar teman yang baru saja belajar Angular sebenarnya tidak memahami prinsip -prinsipnya, tetapi mereka pikir mereka sudah tahu bagaimana menggunakannya.
Setelah mengatakan begitu banyak, mari kita lihat situasi di mana seorang pemula mulai menentukan model data dalam ruang lingkup dan mengikatnya ke arah dua arah. Dalam hal ini, Anda akan menemukan jebakan yang disebutkan di atas. Mari kita lihat kode terlebih dahulu.
// html<div ng-controller="OuterCtrl"> <span ng-bind="a"></span> <div ng-controller="InnerCtrl"> <span ng-bind="a"></span> <button ng-click="a=a+1">Increment</button> </div></div>// javascriptfunction Outerctrl ($ scope) {$ scope.a = 1;} function innerctrl () {}Kode di atas adalah contoh yang sangat sederhana dari ikatan dua arah. Setelah halaman dimuat, 1 akan ditampilkan di div eksternal dan div internal. Ketika tombol penambahan ditekan, Anda akan menemukan bahwa hanya internal 1 menjadi 2. Hal yang sama berlaku untuk terus menekan, hanya angka internal yang akan meningkat. Jadi saat ini, para pemula sering panik. Bagaimana dengan ikatan dua arah ajaib yang disepakati?
SCOPE PIT 2 DALAM SANGULE
Pada saat ini, bayi itu sedikit emosional. Dia berjalan di stackoverflow dan dokumen resmi. Akhirnya, ia menemukan bahwa memang ada solusi, seperti menulis data.a atribut.
// html <div ng-controller = "outerctrl"> <span ng-bind = "data.a"> </span> <div ng-controller = "innerctrl"> <span ng-bind = "data.a"> </span> <button ng-click = "data.a = data+1"> </span> </span </span </kancing </kancing </kancing/data = "data. Outerctrl ($ scope) {$ scope.data = {a: 1};} function innerctrl () {}Kemudian saya menemukan bahwa itu bisa berhasil, dan kedua angka bertambah. Saya adalah raja yang mengikat dua arah ... dan kemudian saya melemparkannya ke samping dan terus mempelajari bagian selanjutnya dari tutorial tanpa peduli dengan prinsip-prinsip spesifik. Ini sebenarnya adalah perjalanan mental saya ketika saya pertama kali belajar Angular. Saya benar -benar malu untuk melakukan aplikasi dan menggunakannya ke lingkungan produksi sebelum saya ingat untuk mempelajari prinsip -prinsip internal.
Lubang selalu perlu diisi
Saya telah mengatakan begitu banyak omong kosong dan saya telah menginjak lubang. Saya telah memasuki tahap pengisian lubang, yang berarti lubang ini dapat diselesaikan dengan atribut yang ditulis sebagai objek. Bahkan, setelah mengetahui prinsipnya, mudah dimengerti. Lingkup sudut dalam dan luar diwarisi oleh rantai prototipe berdasarkan JavaScript, dan hanya metode pewarisan rantai prototipe yang digunakan. Teman dengan beberapa dasar JavaScript harus dapat bereaksi secara instan. Nilai tipe referensi dalam objek prototipe sub-kelas dan nilai tipe referensi dalam objek instance induk adalah referensi yang sama, dan nilai tipe dasar akan menimpa nilai tipe dasar dalam objek induk. Ini sebenarnya adalah alasan mengapa kombinasi warisan ada, karena hanya menggunakan prototipe rantai warisan akan membawa masalah banding, yang agak jauh jangkauannya.
Singkatnya, di sini kita dapat melihat contoh pertama sebagai berikut:
FUNGSI OTERCTRL () {this.a = 1;} function innerctrl () {} var outer = new Outerctrl (); innerctrl.prototype = luar; var dalam = innerctrl (); inner.a = inner.a + 1; Di sini, kami mengatur objek prototipe konstruktor pengontrol internal ke objek lingkup eksternal, sehingga objek lingkup internal yang dihasilkan mewarisi properti A di objek luar luar luar. Properti ini adalah nilai tipe dasar. Saat mengakses properti A dari objek internal, karena objek internal itu sendiri tidak memiliki atribut seperti itu, ia akan mencari dari objek prototipe. Ada atribut seperti itu di objek prototipe luar, sehingga nilai pengembalian tidak ada masalah, tetapi jika kami menetapkan nilai ke properti A dari objek ruang lingkup internal, masalahnya akan muncul. inner.a = inner.a + 1; Pernyataan ini sebenarnya melanjutkan proses yang disebutkan di atas untuk menemukan nilai properti A, dan kemudian memberikan nilai yang dikembalikan ke properti A dari objek ruang lingkup internal. Karena properti A tidak ada, properti nilai tipe dasar A dibuat, memblokir properti A di objek lingkup luar luar, dan lubang ini keluar.
Oleh karena itu, jika kita mengganti atribut nilai tipe dasar dengan atribut nilai tipe referensi, masalahnya dapat diselesaikan, karena atribut yang sesuai dari dua objek adalah nilai jenis referensi yang sama yang dirujuk, dan di mana pun itu dimodifikasi, itu akan tercermin pada semua objek yang merujuknya.
Meringkaskan
Di atas adalah semua tentang jebakan yang perlu diperhatikan dalam sudut. Saya harap konten artikel ini akan membantu semua orang untuk belajar tentang ruang lingkup di sudut.