Bagaimana saya bisa mengirim $scope
objek saya dari satu pengontrol ke yang lain menggunakan .$emit
dan .$on
metode?
function firstCtrl($scope) {
$scope.$emit('someEvent', [1,2,3]);
}
function secondCtrl($scope) {
$scope.$on('someEvent', function(mass) { console.log(mass); });
}
Itu tidak bekerja seperti yang saya pikir seharusnya. Bagaimana $emit
dan $on
bekerja?
javascript
angularjs
Paul Kononenko
sumber
sumber
$rootScope
untuk siaran / siaran ketika itu bisa dihindari.Jawaban:
Pertama-tama, hubungan lingkup orang tua-anak memang penting. Anda memiliki dua kemungkinan untuk memancarkan beberapa peristiwa:
$broadcast
- Mengirim acara ke bawah ke semua ruang lingkup anak,$emit
- Mengirim acara ke atas melalui hierarki lingkup.Saya tidak tahu apa-apa tentang hubungan kontroler (cakupan) Anda, tetapi ada beberapa opsi:
Jika ruang lingkup
firstCtrl
adalah induk darisecondCtrl
ruang lingkup, kode Anda harus berfungsi dengan mengganti$emit
dengan$broadcast
difirstCtrl
:Jika tidak ada hubungan orangtua-anak di antara cakupan Anda, Anda dapat menyuntikkan
$rootScope
ke controller dan menyiarkan acara ke semua cakupan anak (yaitu jugasecondCtrl
).Akhirnya, ketika Anda harus mengirim acara dari pengendali anak ke cakupan yang dapat Anda gunakan
$scope.$emit
. Jika ruang lingkupfirstCtrl
adalah induk darisecondCtrl
ruang lingkup:sumber
$rootScope
ke layanan Anda dan menyiarkan acara dari layanan.$rootScope
- tetapi saya ingin tahu bahwa jika saya memancarkan suatu peristiwa dari suatu layanan (off of$rootScope
), bahwa acara tersebut masih akan meresap ke$rootScope
; KARENA, jika$broadcast
meresap ke hirarki, dan$emit
meresap ke atas - apa yang terjadi antara "ke atas" dan "ke bawah" - karena penyiar / emitor juga adalah pendengar (?). Bagaimana jika saya ingin acara tersebut diam untuk cakupan SEMUA "KE ATAS" dan SEMUA "KE BAWAH", tetapi hanya dapat 'terdengar' pada tingkat yang sama dengan operator?Saya juga akan menyarankan opsi ke-4 sebagai alternatif yang lebih baik untuk opsi yang diusulkan oleh @zbynour.
Gunakan
$rootScope.$emit
daripada$rootScope.$broadcast
terlepas dari hubungan antara trasmitting dan menerima controller. Dengan begitu, acara tetap berada dalam himpunan$rootScope.$$listeners
sedangkan dengan$rootScope.$broadcast
acara menyebar ke semua lingkup anak-anak, sebagian besar yang mungkin tidak akan menjadi pendengar dari acara itu pula. Dan tentu saja di ujung pengontrol penerima Anda hanya menggunakan$rootScope.$on
.Untuk opsi ini Anda harus ingat untuk menghancurkan pendengar rootScope pengendali:
sumber
$rootScope
injeksi ke pengontrol (apa yang tidak diperlukan secara umum). Tapi tentunya pilihan lain, thx!Anda dapat mengirim objek apa pun yang Anda inginkan dalam hierarki aplikasi Anda, termasuk $ scope .
Berikut adalah ide singkat tentang bagaimana siaran dan memancarkan kerja.
Perhatikan simpul-simpul di bawah ini; semua bersarang dalam simpul 3. Anda menggunakan siaran dan memancarkan ketika Anda memiliki skenario ini.
Catatan: Jumlah setiap node dalam contoh ini adalah arbitrer; bisa dengan mudah menjadi yang pertama; nomor dua; atau bahkan nomor 1.348. Setiap angka hanyalah pengidentifikasi untuk contoh ini. Maksud dari contoh ini adalah untuk menunjukkan bersarangnya pengontrol / arahan sudut.
Lihatlah pohon ini. Bagaimana Anda menjawab pertanyaan-pertanyaan berikut?
Catatan: Ada cara lain untuk menjawab pertanyaan-pertanyaan ini, tetapi di sini kita akan membahas siaran dan emisi . Juga, ketika membaca teks di bawah ini anggap setiap angka memiliki file sendiri (direktif, controller) ex one.js, two.js, three.js.
Bagaimana simpul 1 berbicara dengan simpul 3 ?
Dalam file one.js
Dalam file three.js - simpul paling atas untuk semua simpul anak yang diperlukan untuk berkomunikasi.
Bagaimana simpul 2 berbicara dengan simpul 3?
Dalam file two.js
Dalam file three.js - simpul paling atas untuk semua simpul anak yang diperlukan untuk berkomunikasi.
Bagaimana simpul 3 berbicara dengan simpul 1 dan / atau simpul 2?
Dalam file three.js - simpul paling atas untuk semua simpul anak yang diperlukan untuk berkomunikasi.
Dalam file one.js && two.js file mana saja yang ingin Anda tangkap pesannya atau keduanya.
Bagaimana simpul 2 berbicara dengan simpul 1?
Dalam file two.js
Dalam file three.js - simpul paling atas untuk semua simpul anak yang diperlukan untuk berkomunikasi.
Dalam file one.js
NAMUN
Inilah yang ingin saya lakukan.
Di PARENT NODE paling atas ( 3 dalam hal ini ...), yang mungkin merupakan pengendali orang tua Anda ...
Jadi, dalam file three.js
Sekarang di salah satu node anak Anda hanya perlu $ memancarkan pesan atau menangkapnya menggunakan $ on .
CATATAN: Biasanya cukup mudah untuk melakukan percakapan silang dalam satu jalur bertingkat tanpa menggunakan $ emit , $ broadcast , atau $ on , yang berarti sebagian besar kasus penggunaan adalah ketika Anda mencoba untuk mendapatkan simpul 1 untuk berkomunikasi dengan simpul 2 atau sebaliknya.
Bagaimana simpul 2 berbicara dengan simpul 1?
Dalam file two.js
Dalam file three.js - simpul paling atas untuk semua simpul anak yang diperlukan untuk berkomunikasi.
Kami sudah menangani yang ini ingat?
Dalam file one.js
Anda masih perlu menggunakan $ pada dengan setiap nilai spesifik yang ingin Anda tangkap, tetapi sekarang Anda dapat membuat apa pun yang Anda suka di salah satu node tanpa harus khawatir tentang bagaimana untuk mendapatkan pesan melintasi celah simpul orangtua saat kami menangkap dan menyiarkan pushChangesToAllNodes generik .
Semoga ini membantu...
sumber
The event life cycle starts at the scope on which $broadcast was called. All listeners listening for name event on this scope get notified.
maka Anda (seperti saya) akan mendapatkan loop tak terbatas jika Anda menerapkan ctrl1 berbicara ke ctrl2 dengan$on('x', function(e, data) { $broadcast('x', data) })
pada ctrl3. Anda perlu saluran ini sebelum siaran;if (e.targetScope.$id === $scope.$id) { return; }
Untuk mengirim
$scope object
dari satu pengontrol ke pengontrol lainnya, saya akan membahas tentang$rootScope.$broadcast
dan di$rootScope.$emit
sini karena mereka paling banyak digunakan.Kasus 1 :
$ rootScope. $ broadcast: -
$rootScope
pendengar tidak dimusnahkan secara otomatis. Anda perlu menghancurkannya menggunakan$destroy
. Lebih baik digunakan$scope.$on
karena pendengar$scope
dihancurkan secara otomatis yaitu segera setelah $ scope dihancurkan.Atau,
Kasus 2:
$ rootScope. $ emit:
Perbedaan utama dalam $ emit dan $ broadcast adalah $ rootScope. $ Emit event harus didengarkan menggunakan $ rootScope. $ On, karena peristiwa yang dipancarkan tidak pernah turun melalui pohon lingkup. .
Dalam hal ini Anda juga harus menghancurkan pendengar seperti dalam kasus $ broadcast.
Edit:
Edit 2 :
sumber
Anda harus menggunakan $ rootScope untuk mengirim dan menangkap peristiwa antara pengontrol di aplikasi yang sama. Suntikkan dependensi $ rootScope ke pengontrol Anda. Berikut ini contoh kerjanya.
Acara yang ditautkan ke objek $ scope hanya berfungsi di pengontrol pemilik. Komunikasi antara pengontrol dilakukan melalui $ rootScope atau Layanan.
sumber
Anda dapat memanggil layanan dari controller Anda yang mengembalikan janji dan kemudian menggunakannya di controller Anda. Dan selanjutnya gunakan
$emit
atau$broadcast
untuk memberi tahu pengontrol lain tentang hal itu. Dalam kasus saya, saya harus melakukan panggilan http melalui layanan saya, jadi saya melakukan sesuatu seperti ini:dan layanan saya terlihat seperti ini
sumber
Ini adalah fungsi saya:
sumber
sumber
Lingkup dapat digunakan untuk menyebarkan, mengirimkan acara ke lingkup anak-anak atau orang tua.
$ emit - menyebarkan acara ke induk. $ broadcast - menyebarkan acara ke anak-anak. $ on - metode untuk mendengarkan acara, disebarkan oleh $ emit dan $ broadcast.
contoh index.html :
contoh app.js :
Di sini Anda dapat menguji kode: http://jsfiddle.net/zp6v0rut/41/
sumber
Kode di bawah ini menunjukkan dua sub-pengendali dari tempat kejadian dikirim ke atas ke pengendali induk (rootScope)
http://jsfiddle.net/shushanthp/zp6v0rut/
sumber
Menurut acara angularjs, pihak penerima harus berisi argumen dengan struktur seperti
@params
- {Object} acara menjadi objek acara yang berisi info tentang acara tersebut
- {Object} args yang dilewatkan oleh callee (Perhatikan bahwa ini hanya bisa jadi yang lebih baik untuk selalu mengirim objek kamus)
$scope.$on('fooEvent', function (event, args) { console.log(args) });
Dari kode AndaJuga jika Anda mencoba untuk mendapatkan informasi yang dibagikan agar tersedia di berbagai pengontrol yang berbeda, ada cara lain untuk mencapai itu dan itu adalah layanan bersudut. Karena layanan tersebut layanan informasi lajang dapat disimpan dan diambil di seluruh pengontrol. fungsi setter dalam layanan itu, memaparkan fungsi-fungsi ini, membuat variabel global dalam layanan dan menggunakannya untuk menyimpan info
sumber
Cara termudah:
sumber