Ketika datang ke AngularJS, hal pertama yang kita pikirkan mungkin adalah sistem pengikatan dan pengajaran data dua arah, yang juga merupakan aspek paling menarik dari AngularJS. Adapun ikatan data dua arah, saya merasa tidak ada yang bisa dikatakan. Jadi hari ini kita akan membahas secara singkat sistem instruksi dari kerangka kerja AngularJS. Saya juga seorang pemula dan telah berkonsultasi dengan beberapa informasi. Jika ada beberapa hal buruk, Wan Wang menunjukkannya.
Arahan adalah bagian terpenting dari AngularJS, jadi kerangka kerja ini sendiri hadir dengan lebih banyak instruksi, tetapi dalam pengembangan, instruksi ini biasanya tidak dapat memenuhi kebutuhan kita, jadi kita juga perlu menyesuaikan beberapa instruksi. Kemudian arahan AngularJS dapat memiliki empat bentuk ekspresi dalam kode HTML:
1. Gunakan sebagai elemen HTML baru.
<hello> </hello> atau <hello/>
2. Gunakan sebagai atribut elemen
<Div Hello> </div>
3. Gunakan sebagai kelas elemen
<div> </div>
4. Gunakan sebagai komentar
<!-Directive: Halo->
Perhatikan bahwa ada jebakan di sini, yaitu memiliki ruang setelah "arahan: halo", jika tidak, itu tidak akan berguna. Pada saat yang sama, disarankan untuk menggunakan lebih sedikit metode anotasi. Jika Anda harus mengejar kualitas tinggi, maka bersikaplah santai. Karena instruksi memiliki empat bentuk ekspresi di atas, bagaimana mereka mendefinisikannya secara khusus?
.directive ('hello', function () {return {restrict: 'aeCm', template: '<button> klik saya </button>'}})Di atas adalah kode paling sederhana untuk menentukan arahan, tidak diragukan lagi. Dalam kode di atas, metode Directive () mendefinisikan instruksi baru. Metode ini memiliki dua parameter. 'Halo' pertama adalah menentukan bahwa nama instruksi adalah halo, dan parameter kedua adalah fungsi yang mengembalikan objek instruksi. Jadi dalam kode di atas, fungsi ini terutama menggunakan dua properti untuk menentukan arahan halo ini:
1. Atribut Batasi [String] terutama digunakan untuk menentukan bentuk ekspresi apa yang dapat digunakan dalam kode HTML. A mewakili atribut, E mewakili elemen, C mewakili kelas, dan M mewakili komentar. Dalam situasi yang sebenarnya, kami biasanya menggunakan dua metode AE.
2. Atribut Template [String atau Function] Menentukan markup HTML yang dihasilkan oleh perintah setelah dikompilasi dan dihubungkan oleh Angular. Atribut ini bisa sesederhana hanya satu teks HTML di dalamnya, atau bisa sangat rumit. Ketika nilai atribut adalah fungsi, metode mengembalikan string yang mewakili templat, dan ekspresi {{}} juga dapat digunakan di dalamnya.
Template: function () {return '<button> Klik saya </button>'; }Tetapi secara umum, atribut templat akan digantikan oleh templateUrl, dan digunakan untuk menunjuk ke alamat file eksternal, jadi kami biasanya menempatkan templat dalam file html eksternal, dan kemudian menggunakan templateUrl untuk menunjuk ke sana.
Saat mendefinisikan instruksi, selain dua atribut paling dasar di atas, kami juga akan menggunakan banyak atribut lainnya. Jadi mari kita bicara tentang mereka satu per satu:
1. Atribut Prioritas [Number], atribut ini digunakan untuk menentukan prioritas instruksi khusus. Ketika ada lebih dari satu instruksi pada elemen DOM, Anda perlu membandingkan prioritas instruksi. Instruksi dengan prioritas yang lebih tinggi dieksekusi terlebih dahulu. Prioritas ini digunakan untuk mengurutkan fungsi kompilasi sebelum menjalankan instruksi. Jadi kita akan berbicara tentang fungsi kompilasi dengan cermat di bawah ini.
2. Atribut Terminal [Boolean], parameter ini digunakan untuk menentukan apakah akan menghentikan instruksi pada elemen saat ini yang memiliki prioritas lebih rendah daripada instruksi ini. Jika nilainya benar, itu normal. Itu dieksekusi dalam urutan prioritas. Jika diatur ke False, instruksi pada elemen saat ini yang memiliki prioritas lebih rendah daripada instruksi ini tidak akan dieksekusi.
3. Ganti atribut [boolean], atribut ini digunakan untuk menentukan apakah konten HTML yang dihasilkan akan menggantikan elemen HTML yang menentukan arahan ini. Ketika kami mengatur nilai properti ini ke True, buka konsol dan lihatlah, Anda akan menemukan bahwa elemen yang dihasilkan oleh instruksi ini akan terlihat seperti ini:
Ketika kami mengatur ke false, itu akan terlihat seperti ini:
.
4. Link [Fungsi] Atribut. Dalam contoh di atas, perintah yang kami kustomisasi sebenarnya tidak memiliki banyak makna. Ini hanya perintah yang paling sederhana. Ada banyak atribut yang belum kami tentukan untuk itu, jadi itu tidak banyak berguna. Misalnya, fungsi tautan ini mencakup tiga parameter: ruang lingkup, elemen, dan attrs. Fungsi tautan ini terutama digunakan untuk menambahkan pemantauan acara ke elemen DOM, perubahan atribut model monitor, dan memperbarui DOM. Ini memiliki tiga parameter:
1: Parameter Lingkup. Ketika kita tidak mendefinisikan atribut ruang lingkup untuk instruksi, itu mewakili ruang lingkup pengontrol induk.
2: Parameter elemen adalah JQLite (subset jQuery) dari instruksi untuk membungkus elemen DOM. Jika Anda memperkenalkan jQuery sebelum memperkenalkan AngularJS, maka elemen ini adalah elemen jQuery, bukan elemen JQLite. Karena elemen ini telah dibungkus oleh jQuery/jqlite, kami tidak perlu lagi menggunakan $ () untuk membungkusnya saat melakukan operasi DOM.
Tiga: Parameter ATRS, yang berisi objek parameter standar dari atribut elemen di mana arahan berada.
5. Atribut lingkup [boolean atau objek] digunakan untuk menentukan ruang lingkup instruksi. Itu salah secara default. Dengan kata lain, instruksi mewarisi ruang lingkup pengontrol induk. Anda dapat menggunakan atribut dalam ruang lingkup pengontrol induk sesuka hati, tetapi dengan cara ini, itu akan mencemari atribut dalam ruang lingkup induk, yang tidak disarankan. Jadi kita dapat membiarkan ruang lingkup mengambil dua nilai berikut: true dan {}.
Ketika benar, itu berarti bahwa Angular menciptakan ruang lingkup yang diwarisi dari ruang lingkup induk untuk instruksi.
var myapp=angular.module('myapp',[]) .controller('myctrl',['$scope', function ($scope) { $scope.color='red'; }]) .directive('hello', function () { return{ restrict:'AECM', replace:true, template:'<button ng-click="sayhello()" style = "latar belakang-color: {{color}}"> klik saya </button> ', scope: true, link: function (scope, elements, attrs) {elements.bind (' click ', function () {elements.css (' latar belakang ',' biru ');})}}}})Di sini kami mendefinisikan atribut warna untuk ruang lingkup induk dan menetapkannya menjadi merah. Dalam atribut lingkup Hello Directive, kami memberikan yang benar, jadi Angular menciptakan ruang lingkup yang diwarisi dari ruang lingkup induk untuk arahan ini. Kemudian di atribut template, kami menggunakan {{}} untuk menggunakan atribut warna yang diwarisi dari ruang lingkup induk, sehingga tombolnya akan merah.
Ketika {}, itu berarti bahwa ruang lingkup yang terisolasi dibuat dan sifat -sifat lingkup induk tidak akan diwariskan. Tetapi kadang -kadang kita juga perlu mengakses properti atau metode dalam ruang lingkup induk, jadi apa yang harus kita lakukan? Angular telah lama memikirkan hal ini untuk kita. Ada tiga cara untuk mengingat operasi di atas:
1: Gunakan @ untuk mengimplementasikan ikatan satu arah. Jika kita hanya memberikan lingkup nilai {} ini, maka warna latar belakang tombol dalam kode di atas akan menjadi abu -abu. , dan jika kita perlu menggunakan atribut warna dari ruang lingkup induk, kita dapat menulis ini:
scope {color: '@color'} <hello color = "{{color}}"> </hoo>Ada dua titik yang perlu diperhatikan di sini: 1. Warna properti dalam ruang lingkup mewakili warna dalam ekspresi {{}}, dan keduanya harus konsisten. 2. Nilai warna atribut dalam ruang lingkup, yaitu warna setelah @, mewakili warna atribut dalam elemen HTML di bawah ini, sehingga keduanya juga harus konsisten. Jika nama atribut di sini sama dengan nama yang digunakan dalam ekspresi {{}} dalam templat, nama atribut setelah @ dapat dihilangkan dan ditulis dalam bentuk berikut.
scope {color: '@'}Dari nilai ruang lingkup dalam instruksi, dapat dilihat bahwa warna dalam ekspresi {{}} dalam templat instruksi menunjuk ke atribut warna elemen elemen saat ini, dan nilai atribut warna ini adalah nilai warna properti lingkup induk. Lingkup induk memberikan nilai atribut warnanya ke atribut warna elemen saat ini, dan kemudian atribut warna memberikan nilai pada warna dalam ekspresi dalam templat. Proses ini satu arah.
Dua: use = untuk mengimplementasikan pengikatan dua arah
.directive ('hello', function () {return {restrict: 'aeCm', ganti: true, template: '<tombol style = "latar belakang-color: {{color}}"> klik saya </button>', scope: {color: '='}, tautan: function (scope, elemen, elemen, attrs) {elements. elements.css ('latar belakang', 'biru');<hello color = "color"> </hello> <input type = "text" ng-model = "color"/>
Di sini kita memiliki dua arah yang mengikat atribut warna dalam ruang lingkup instruksi dan atribut warna dalam ruang lingkup induk, dan menambahkan acara klik ke fungsi tautan instruksi. Mengklik tombol akan mengubah warna tombol, dan mengubah nilai atribut warna dari ruang lingkup instruksi, dan kemudian tambahkan tag input ke halaman HTML, output atau input nilai atribut warna dari ruang lingkup induk. Ada tempat yang perlu diperhatikan di sini: nilai nama atribut elemen saat ini tidak perlu menambahkan ekspresi {{}}, karena ruang lingkup induk di sini melewati model data ruang lingkup nyata, bukan string sederhana, sehingga kita dapat melewati string sederhana, array, dan bahkan objek kompleks ke ruang lingkup instruksi. Sekarang mari kita lihat apa yang terjadi saat mengklik tombol ini.
Di sini kita dapat melihat bahwa warna tombol telah berubah menjadi merah muda, yang berarti bahwa klik mengubah atribut warna ruang lingkup perintah, yang menyebabkan warna tombol berubah. Tapi di sini bukan hanya tombol yang telah berubah. Perhatikan nilai dalam bentuk input juga menjadi merah muda, yang berarti bahwa atribut warna dari ruang lingkup induk juga telah berubah. Selain itu, mari kita masukkan warna ke dalam input untuk melihat perubahan apa yang terjadi.
, dapat dilihat bahwa ketika kita memasukkan warna lain dalam bentuk, warna tombol juga berubah, yang berarti bahwa atribut warna ruang lingkup perintah telah diubah. Singkatnya, kita dapat menemukan bahwa menggunakan '=' adalah ikatan dua arah.
Tiga: Gunakan & Panggil Metode dalam Lingkup Induk
var myapp = angular.module ('myapp', []) .controller ('myctrl', ['$ scope', function ($ scope) {$ scope.color = 'red'; $ scope.sayhello = function () {what {hello ');};}]). Template: '<tombol ng-click = "sayhello ()" style = "background-color: {{color}}"> klik saya </button>', lingkup: {color: '=', sayhello: '&'}, function (scope, elemen, attrs) {elements.bind ('click'); scope. $ apply (function () {scope.color = 'pink';})})}}})<hello color = "color" sayshello = "sayhello ()"> </hello> <input type = "text" ng-model = "color"/>
Di sini kita juga memiliki dua hal yang perlu diperhatikan: 1. Kita tidak hanya perlu menggunakan arahan klik ng di templat untuk mengikat metode dalam ruang lingkup induk untuk dipanggil, tetapi juga menambahkan properti ke elemen saat ini, dan properti ini menunjuk ke metode ruang lingkup induk untuk dipanggil. 2. Tiga dari atribut lingkup instruksi Sayshello, atribut elemen saat ini Sayshello, dan nama metode acara yang mengikat template harus konsisten. Kemudian kita dapat mengklik tombol dan kotak dialog muncul.
6. Transclude [boolean] atribut, atribut ini digunakan untuk memungkinkan kami menentukan apakah arahan dapat berisi konten apa pun
.directive ('hello', function () {return {restrict: 'aecm', ganti: true, transclude: true, scope: {}, template: '<div ng-transclude> </div>',}})) <hello> halo <span> {{color}} </span> </hello>Ketika nilainya benar, ini adalah output nilai pada halaman. Saat salah, halaman akan kosong. Ada tempat untuk memperhatikan di sini, yaitu <span> {{color}} </span>. Warnanya di sini adalah warna dalam lingkup induk. Ini bukan atribut warna ruang lingkup dalam arahan.
7. Parameter Kompilasi [Fungsi]. Metode ini memiliki dua elemen parameter, attrs. Elemen parameter pertama mengacu pada elemen di mana instruksi berada, dan attrs kedua mengacu pada daftar standar parameter yang ditetapkan pada elemen. Di sini kami juga memiliki tempat yang perlu diperhatikan: fungsi kompil tidak dapat mengakses ruang lingkup dan harus mengembalikan fungsi tautan. Namun, jika fungsi kompilasi tidak diatur, Anda dapat mengonfigurasi fungsi tautan secara normal (dengan kompilasi, Anda tidak dapat menggunakan tautan, fungsi tautan dikembalikan oleh kompilasi).
.directive('hello', function () { return{ restrict:'AECM', replace:true, translate:true, template:'<button ng-click="sayhello()" style="background-color: {{color}}">click me</button>', scope:{ color:'=', sayhello:'&' }, compile: function (element,attrs) { return function (Lingkup, Elemen, ATTRS) {elements.bind ('klik', function () {elements.css ('latar belakang', 'biru'); scope. $ apply (function () {scope.color = 'pink';})})};Sekarang mari kita klik tombol ini
Kami menemukan bahwa apa yang terjadi setelah mengklik tombol di sini sama dengan yang menggunakan atribut tautan sebelumnya, dan sebenarnya tidak ada banyak perbedaan.
Bahkan, dalam kebanyakan kasus, kita hanya perlu menggunakan fungsi tautan. Ini karena sebagian besar instruksi hanya perlu mempertimbangkan untuk mendaftarkan mendengarkan acara, model pemantauan, dan memperbarui DOM, yang dapat dilakukan dalam fungsi tautan. Namun, untuk instruksi seperti NG-Repeat, elemen DOM perlu dikloning dan diulang beberapa kali, dan fungsi kompilasi dilakukan sebelum fungsi tautan dijalankan. Jadi mengapa kita membutuhkan dua fungsi terpisah untuk menyelesaikan proses pembuatan, dan mengapa kita tidak bisa menggunakannya saja? Untuk menjawab pertanyaan ini dengan baik, kita perlu memahami bagaimana arahan disusun dalam Angular!
8. Bagaimana instruksi dikompilasi
Ketika boot aplikasi Angular kami dimulai, Angular akan menggunakan layanan $ Compile untuk melintasi elemen DOM. Setelah semua instruksi diakui, metode kompilasi instruksi akan dipanggil, fungsi tautan akan dikembalikan, dan kemudian fungsi tautan akan ditambahkan ke daftar fungsi tautan yang dieksekusi nanti. Proses ini disebut tahap kompilasi. Instruksi seperti NG-RePeat perlu diulang dan dikloning berkali-kali. Fungsi kompilasi dijalankan hanya sekali selama tahap kompilasi dan templat ini disalin, tetapi fungsi tautan dieksekusi untuk setiap instance yang disalin. Jadi kami dapat menanganinya secara terpisah untuk meningkatkan kinerja kami (kalimat ini agak tidak realistis, saya menyalinnya dari tempat lain.
9. Pengontrol [String atau Fungsi] dan membutuhkan parameter [String atau String []]. Ketika kami ingin mengizinkan instruksi lain untuk berinteraksi dengan instruksi Anda, kami perlu menggunakan fungsi pengontrol. Ketika arahan lain ingin berinteraksi, ia perlu menyatakan referensi ke instance pengontrol dari arahan Anda.
.directive ('hello', function () {return {scope: {}, membutuhkan: '^he', compile: function (element, attrs) {return function (scope, elemen, attrs, cntins) {cntins.fn () {{{{{{{{{{{{{{{{{{{{{{{{{{{{{) {{{{{{{). ($ scope, $ compile, $ http) {this.fn = function () {alert ('Hello');<dia> <hello color = "color" sayshello = "sayhello ()"> </hello> </he>
Saat halaman dimuat, kotak dialog akan muncul.
Nah, di atas adalah apa yang saya pelajari tentang instruksi yang telah saya pelajari selama periode waktu ini. Mari kita tulis yang ini.
Analisis komprehensif di atas dari instruksi di AngularJS (harus dibaca) adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.