Di AngularJS, Anda dapat menggunakan mekanisme siaran acara $ siaran, $ emit, $ on untuk berkomunikasi di antara berbagai lingkup.
memperkenalkan:
Tujuan $ siaran adalah untuk menyebarkan acara dari ruang lingkup induk ke ruang lingkup anak, termasuk dirinya sendiri. Formatnya adalah sebagai berikut: $ Broadcast (EventName, Args)
Tujuan $ emit adalah untuk menyebarkan peristiwa dari ruang lingkup anak ke ruang lingkup induk, termasuk dirinya sendiri sampai ruang lingkup akar. Formatnya adalah sebagai berikut: $ emit (eventName, args)
$ On digunakan untuk memantau peristiwa yang disebarkan dari anak -anak atau cakupan orang tua dan data yang sesuai dalam ruang lingkup. Formatnya adalah sebagai berikut: $ on (acara, data)
Dalam deskripsi di atas, EventName adalah nama acara yang perlu dipantau, acara parameter dalam metode $ ON adalah objek yang relevan dari acara tersebut, dan data adalah data yang disebarkan oleh acara tersebut.
Parameter peristiwa dalam metode $ on memiliki properti dan metode berikut
Atribut Acara/Metode Deskripsi Fungsional
| Properti/Metode Acara | Deskripsi fungsional |
|---|---|
| Event.targetScope | Dapatkan ruang lingkup acara propagasi |
| event.currentscope | Dapatkan ruang lingkup acara yang diterima |
| event.name | Nama acara penyebaran |
| event.stoppropagation () | Cegah peristiwa dari perambatan gelembung, hanya berlaku di acara $ emit |
| event.preventdefault () | Mencegah peristiwa propagasi terjadi |
| event.defaultPrevented | Kembalikan true jika acara preventdefault dipanggil |
Kode:
<! Doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "konten-tipe" content = "text/html; charset = utf-8"/> <title> </title> <meta charset = "UTF-8"/<script script = "ajcric =" aupps = "script script =" ukript script = "ukript script =" UTF-8 "/ angular.module ("myapp", []); // controller self myapp.controller ("self", function ($ scope, $ window) {// acara propagasi tombol $ scope.toparent = function () {// Daftarkan peristiwa yang disebarkan ke atas, eventName: "dari diri sendiri ', data:" DATAFEAD "DAFTAR SELAMA. $ scope.tochild = function () {// Daftarkan peristiwa yang disebarkan ke bawah, EventName: 'Fromsely', Data: OneObject $ SCOPE. $ BRoadcast ("Fromself", {Divname: "self", "event {event {{{{{{"; $ window.alert ("Node Current" + Event.currentscope.name + "Acara yang dicegat dari" + data.divName + ":" + event.name + ", fungsinya adalah" + data.description); // Parent Controller myapp.controller ("Parent", function ($ scope, $ window) {$ scope.name = "parent"; // $ on digunakan untuk peristiwa $ scope. $ On ("fromself", function (event, data) {$ window.alert ("node" + event.currentscope.name. "i event. fungsi adalah " + data.description);}); $ scope. $ on (" fromchild ", function (event, data) {$ window.alert (" node saat ini " + event.currentscope.name +", peristiwa yang dicegat dari " + data.divName +": " + event.name +", data " + Data. // controller anak myapp.controller ("child", function ($ scope, $ window) {$ scope.name = "child"; // $ on digunakan untuk mencegat peristiwa dari induk lingkup $ scope. $ On ("fromself", event, data) {$ window.alert ("node saat ini" + eventscope. Event.name + ", fungsinya adalah" + Data.description); </script></head><body> <form name="test"> <div ng-controller="Parent"> Here is the parent Div <div ng-controller="Self"> Here is the child SelfDiv <input type="button" ng-click="toParent()" value="Propagate event to ParentDiv" /> <input type="button" ng-click="toChild()" value = "Propagate Event to ChildDiv"/> <Div ng-controller = "Child"> Berikut adalah anak ChildDiv <input type = "Tombol" ng-click = "totop ()" value = "unggah acara"/> </div> </div> <v ng-controller = "Borther"> di sini adalah Brother Borth Borth> </Div-Controller = "Borther"> di sini adalah Brother Borth Borth> </Div-Controller = "Borther"> Di sini adalah Brother Borth Borth dari diri sendiri </html>Kode
Memengaruhi:
Properti Lainnya:Acara di atas disiarkan di AngularJS - analisis komprehensif $ siaran, $ emit, $ on 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.