Lingkup di AngularJS memiliki struktur yang sangat hierarkis dan bersarang. Mereka semua memiliki $ rootscope utama (yaitu, aplikasi sudut yang sesuai atau NG-APP), dan kemudian semua bagian lingkup lainnya diwarisi dari $ rootscope ini, atau mereka bersarang di bawah ruang lingkup utama. Sering kali, Anda akan menemukan bahwa lingkup ini tidak berbagi variabel atau mewarisi apa pun dari prototipe lain.
Jadi dalam hal ini, bagaimana Anda berkomunikasi di antara lingkup? Salah satu opsi adalah membuat layanan singleton di ruang lingkup aplikasi dan kemudian menangani komunikasi untuk semua subscop melalui layanan ini.
Ada opsi lain di AngularJS: Tangani komunikasi melalui peristiwa dalam ruang lingkup. Tetapi pendekatan ini memiliki beberapa keterbatasan; Misalnya, Anda tidak dapat menyebarkan peristiwa secara luas ke ruang lingkup semua pemantauan. Anda harus memilih apakah akan berkomunikasi dengan ruang lingkup orang tua atau ruang lingkup anak.
$ on, $ emit dan $ siaran membuat transfer acara dan data antar pengontrol sederhana.
Contohnya adalah sebagai berikut
Kode HTML
<Div ng-controller = "ParentCtrl"> <!-Parent-> <div ng-controller = "selfctrl"> <!-self-self-click = "click ()"> klik saya </a> <Div ng-controller = "childctrl"> </div> <!-child-controller = "childctrl"> </div> <!-child-controller = "childctrl"> </div> <!-child-controller = "childctrl"> </div> <!-child-controller = "childctrl"> </Div> </!-child-controller = "childctrl"> </Div> </! <!-Parent-> </div>
Kode JS
app.controller ('selfctrl', function ($ scope) {$ scope.click = function () {$ scope. $ broadcast ('to-child', 'child'); $ scope. $ emit ('to-parent', 'parent');}}); app.controller ('parentctrl', $ function '); function (event, data) {console.log ('ParentCtrl', data); // Orangtua dapat memperoleh nilai}); $ scope. $ on ('to-child', function (event, data) {console.log ('childctrl', data); // anak dapat memperoleh nilai}); fungsi ($ scope) {$ scope. $ on ('to-parent', function (event, data) {console.log ('broctrl', data); // nilainya tidak diperoleh dengan level});Hasil akhir
Induk induk
Anak pengasuh anak
$ emit dan $ siaran dapat melewati beberapa parameter, dan $ ON juga dapat menerima banyak parameter.
Parameter acara acara dalam metode $ on, properti dan metode objeknya adalah sebagai berikut
| Properti Acara | Tujuan |
|---|---|
| Event.targetScope | Ruang lingkup memancarkan atau menyebarkan acara asli |
| event.currentscope | Lingkup acara yang saat ini sedang diproses |
| event.name | Nama Acara |
| event.stoppropagation () | Fungsi yang mencegah peristiwa dari merambat lebih lanjut (menggelegak/menangkap) (ini hanya berfungsi untuk acara yang dipancarkan dengan `$ emit`) |
| event.preventdefault () | Metode ini tidak benar -benar melakukan apa pun, tetapi akan mengatur `defaultPrevented` menjadi true. Itu tidak memeriksa nilai `defaultPrevented` sampai pelaksana pendengar acara mengambil tindakan. |
| event.defaultPrevented | benar jika `preventdefault` dipanggil |
Rasanya jauh lebih nyaman daripada komunikasi layanan di berbagai pengendali ~~
Di atas adalah kompilasi informasi tentang AngularJS $ on, $ emit dan $ siaran. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!