Semasa membuat aplikasi berasaskan web, cepat atau lambat aplikasi anda perlu menangani peristiwa DOM seperti klik tetikus, gerakan, penekanan papan kekunci, perubahan acara, dll.
AngularJS dapat menambahkan fungsi yang dapat digunakan untuk menangani peristiwa tersebut.
Sebagai contoh, jika ada butang di halaman dan anda ingin memproses sesuatu ketika butang diklik, kami dapat menggunakan arahan acara ng-klik.
Kami akan meneliti arahan Acara secara terperinci semasa kursus ini.
Dalam tutorial ini, anda akan belajar-
- Apakah arahan ng-klik?
- Apakah arahan ng-show?
- Apakah arahan ng-hide?
Apakah arahan ng-klik?
The "ng klik arahan" digunakan untuk memohon kelakuan adat apabila elemen dalam HTML diklik. Ini biasanya digunakan untuk butang kerana itu adalah tempat yang paling umum untuk menambahkan peristiwa yang bertindak balas terhadap klik yang dilakukan oleh pengguna
Mari kita lihat contoh ringkas bagaimana kita dapat melaksanakan peristiwa klik.
Dalam contoh ini, kita akan mempunyai pemboleh ubah penghitung yang akan bertambah nilainya ketika pengguna mengklik butang.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Penjelasan Kod:
- Kami pertama kali menggunakan arahan ng-init untuk menetapkan nilai kiraan pemboleh ubah tempatan ke 0.
- Kami kemudian memperkenalkan arahan acara ng-klik ke butang. Dalam arahan ini, kami menulis kod untuk menambah nilai pemboleh ubah kiraan dengan 1.
- Di sini kami memaparkan nilai pemboleh ubah kiraan kepada pengguna.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dari output di atas,
- Kita dapat melihat bahawa butang "Kenaikan" dipaparkan dan nilai pemboleh ubah kiraan pada awalnya adalah sifar.
- Apabila anda mengklik pada butang Kenaikan, nilai kiraan akan bertambah sesuai seperti yang ditunjukkan dalam gambar output di bawah.
Apakah arahan ng-show?
Arahan ng-Show digunakan untuk menunjukkan atau menyembunyikan elemen HTML yang diberikan berdasarkan ungkapan yang diberikan pada atribut ngShow. Di latar belakang, elemen ditunjukkan atau disembunyikan dengan membuang atau menambahkan kelas CSS .ng-hide ke elemen.
Di latar belakang, elemen ditunjukkan atau disembunyikan dengan membuang atau menambahkan kelas CSS .ng-hide ke elemen.
Mari kita lihat contoh bagaimana kita dapat menggunakan arahan "acara ngshow" untuk memaparkan elemen tersembunyi.
Event Registration Guru99 Global Event
Angular
Penjelasan Kod:
- Kami melampirkan arahan acara ng-klik ke elemen butang. Di sini kami merujuk fungsi yang disebut "ShowHide" yang ditentukan dalam pengawal kami - DemoController.
- Kami melampirkan atribut ng-show ke tag div yang berisi teks Angular. Ini adalah tag yang akan kami tampilkan / sembunyikan berdasarkan atribut ng-show.
-
Di pengawal, kami melampirkan pemboleh ubah anggota "IsVisible" ke objek skop. Atribut ini akan diteruskan ke atribut ang-show sudut (langkah # 2) untuk mengawal keterlihatan kawalan div. Kami pada mulanya menetapkan ini ke false sehingga ketika halaman pertama kali dipaparkan, tag div akan disembunyikan.
Catatan: - Apabila atribut ng-show diset ke true, kawalan berikutnya yang dalam kes kami adalah tag div akan ditunjukkan kepada pengguna. Apabila atribut ng-show diset ke false maka kawalan akan disembunyikan dari pengguna.
- Kami menambahkan kod ke fungsi ShowHide yang akan menetapkan pemboleh ubah anggota IsVisible menjadi benar sehingga tag div dapat ditunjukkan kepada pengguna.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Keluaran: 1
Dari output,
- Anda pada awalnya dapat melihat bahawa tag div yang memiliki teks "AngularJS" tidak ditunjukkan dan ini kerana objek lingkup isVisible pada awalnya ditetapkan ke false yang kemudiannya kemudian diteruskan ke arahan ng-show dari tag div.
- Apabila anda mengklik pada butang "Show AngularJS", ia mengubah pembolehubah anggota isVisible menjadi benar dan dengan itu teks "Angular" dapat dilihat oleh pengguna. Output di bawah akan ditunjukkan kepada pengguna.
Keluarannya sekarang menunjukkan tag div dengan teks Angular.
Apakah arahan ng-hide?
Dengan arahan ng-hide elemen akan tersembunyi jika ungkapan itu BENAR. Sekiranya Ungkapan itu SALAH maka elemen akan ditunjukkan. Di latar belakang, elemen ditunjukkan atau disembunyikan dengan membuang atau menambahkan kelas CSS .ng-hide ke elemen.
Sebaliknya dengan ng-hide, elemen itu disembunyikan jika ungkapan itu benar dan ia akan ditunjukkan jika ia salah.
Mari kita lihat contoh yang serupa dengan yang ditunjukkan untuk ngShow untuk menunjukkan bagaimana atribut ngHide dapat digunakan.
Event Registration Guru99 Global Event
Angular
Penjelasan Kod:
- Kami melampirkan arahan acara ng-klik ke elemen butang. Di sini kami merujuk fungsi yang disebut ShowHide yang ditentukan dalam pengawal kami - DemoController.
- Kami melampirkan atribut ng-hide ke tag div yang berisi teks Angular. Ini adalah tag, yang akan kami tampilkan / sembunyikan berdasarkan atribut ng-show.
- Di pengawal, kami melampirkan pemboleh ubah anggota isVisible ke objek skop. Atribut ini akan diteruskan ke atribut ang-show sudut untuk mengawal keterlihatan kawalan div. Kami pada mulanya menetapkan ini ke false sehingga ketika halaman pertama kali dipaparkan, tag div akan disembunyikan.
- Kami menambahkan kod ke fungsi ShowHide yang akan menetapkan pemboleh ubah anggota IsVisible menjadi benar sehingga tag div dapat ditunjukkan kepada pengguna.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dari output,
- Anda pada awalnya dapat melihat bahawa tag div yang mempunyai teks "AngularJs" pada awalnya ditunjukkan kerana nilai harta palsu dihantar ke arahan ng-hide.
- Apabila kita mengklik pada butang "Hide Angular" nilai harta benar akan dihantar ke arahan ng-hide Oleh itu output di bawah akan ditunjukkan, di mana perkataan "Angular" akan disembunyikan.
Arahan Pendengar Acara AngularJS
Anda boleh menambahkan pendengar acara AngularJS ke elemen HTML anda dengan menggunakan satu atau lebih arahan berikut:
- ng-kabur
- ng-perubahan
- ng-klik
- ng-salin
- ng-potong
- ng-dblclick
- ng-fokus
- ng-keydown
- menekan kekunci
- ng-keyup
- ng-mousedown
- ng-tetikus
- ng-mouseleave
- ng-mousemove
- ng-tetikus
- ng-tetikus
- ng-tampal
Ringkasan
- Arahan acara digunakan dalam sudut untuk menambahkan kod tersuai untuk bertindak balas terhadap peristiwa yang dihasilkan oleh campur tangan pengguna seperti klik butang, klik papan kekunci dan tetikus, dll.
- Arahan peristiwa yang paling biasa adalah arahan ng-klik yang digunakan untuk menangani peristiwa klik. Penggunaan yang paling umum adalah untuk klik butang di mana kod dapat ditambahkan untuk bertindak balas terhadap klik butang.
- Elemen HTML juga dapat disembunyikan atau ditunjukkan kepada pengguna dengan menggunakan atribut sudut ng-show dan ng-hide.
