Mengapa kami menggunakan $ rootScope. $ Broadcast di AngularJS?

109

Mencoba mencari beberapa informasi dasar untuk AngularJS $rootScope.$broadcast, Tapi dokumentasi AngularJS tidak banyak membantu. Dengan kata mudah mengapa kita menggunakan ini?

Juga, di dalam templat Handuk Panas John Papa ada fungsi khusus dalam modul umum bernama $broadcast:

function $broadcast() {
    return $rootScope.$broadcast.apply($rootScope, arguments);
}

Saya tidak mengerti apa yang dilakukannya. Jadi, inilah beberapa pertanyaan dasar:

1) Apa yang $rootScope.$broadcastdilakukan?

2) Apa perbedaan antara $rootScope.$broadcastdan $rootScope.$broadcast.apply?

Nexus23
sumber
$rootScope.$broadcast.apply()digunakan karena jika Anda ingin meneruskan argumentsobjek khusus ke fungsi lain, Anda perlu menggunakan apply()(sebagai lawan call()). Selain tautan @ Blackhole ke halaman MDN di melamar, Anda juga dapat melihat entri di arguments.
Scott Schupbach

Jawaban:

97
  1. Apa yang $rootScope.$broadcastdilakukannya?

    $rootScope.$broadcastsedang mengirim acara melalui cakupan aplikasi. Setiap ruang lingkup anak-anak aplikasi yang dapat menangkapnya menggunakan sederhana: $scope.$on().

    Sangat berguna untuk mengirim peristiwa ketika Anda ingin mencapai lingkup yang bukan induk langsung (misalnya, cabang dari induk)

    !!! Namun satu hal yang tidak boleh dilakukan adalah menggunakan $rootScope.$ondari pengontrol. $rootScopeadalah aplikasinya, saat pengontrol Anda dihancurkan, pemroses peristiwa itu akan tetap ada, dan saat pengontrol Anda akan dibuat lagi, itu hanya akan menumpuk lebih banyak pemroses peristiwa. (Jadi satu siaran akan ditangkap beberapa kali). Gunakan $scope.$on()sebagai gantinya, dan pendengar juga akan dihancurkan.

  2. Apa perbedaan antara $rootScope.$broadcast& $rootScope.$broadcast.apply?

    Terkadang Anda harus menggunakan apply(), terutama saat bekerja dengan arahan dan pustaka JS lainnya. Namun karena saya tidak tahu basis kode itu, saya tidak akan tahu apakah itu masalahnya di sini.

pengguna1412031
sumber
11
Tangkapan bagus pada $rootScope.$onkebocoran memori. Ini berlaku untuk jawaban yang diterima juga, karena pengontrol cenderung memanggil hiEventServicedia yang dibuat.
adamdport
Apa contoh di mana Anda akan menggunakan $broadcastvs.$broadcast.apply()
tamu
$ rootScope. $ broadcast mengirimkan acara ke semua pendengar, tidak hanya pendengar dari cakupan turunan. $ scope. $ broadcast membatasi acara untuk cakupan anak
Geert Bellemans
157

$rootScope pada dasarnya berfungsi sebagai pendengar dan operator acara.

Untuk menjawab pertanyaan tentang bagaimana ini digunakan, ini digunakan dalam hubungannya dengan rootScope.$on;

$rootScope.$broadcast("hi");

$rootScope.$on("hi", function(){
    //do something
});

Namun, adalah praktik yang buruk untuk menggunakannya $rootScopesebagai layanan acara umum aplikasi Anda sendiri, karena Anda akan segera berakhir dalam situasi di mana setiap aplikasi bergantung pada $ rootScope, dan Anda tidak tahu komponen apa yang mendengarkan kejadian apa.

Praktik terbaiknya adalah membuat layanan untuk setiap acara khusus yang ingin Anda dengarkan atau siarkan.

.service("hiEventService",function($rootScope) {
    this.broadcast = function() {$rootScope.$broadcast("hi")}
    this.listen = function(callback) {$rootScope.$on("hi",callback)}
})
Code Whisperer
sumber
4
Terima kasih @itcouldevenbeabout bukankah baris ini memanggil logika yang sama untuk melampirkan acara ke $ rootScope global? function () {$ rootScope. $ broadcast ("hi")}, yang Anda sebutkan adalah praktik yang buruk?
Nexus23
11
Menggunakan layanan untuk membuat siaran dan juga melampirkan pendengar untuk acara tertentu menghindari situasi di mana Anda tidak yakin siapa yang mendengarkan. Menjadi jelas komponen mana yang memiliki layanan acara sebagai dependensi
CoolTapes
4
Setelah baru saja menemukan perbedaan antara $ emit dan $ broadcast, saya cenderung mengatakan bahwa akan lebih baik untuk $ memancarkan acara - dengan cara itu Anda membuat acara mencemari sekecil mungkin cakupan, (idealnya layanan akan memiliki itu ruang lingkupnya sendiri, tapi saya rasa itu tidak mungkin?)
Brondahl
3
-1. Saya tidak mengerti, bagaimana isolasi dalam sebuah layanan lebih baik dari sekedar penyiaran. Bagaimanapun, lebih baik gunakan ruang lingkup pribadi sendiri dalam layanan. Dan lebih baik gunakan $ emit, dan bukan $ broadcast. Juga layanan yang Anda usulkan tidak mendukung argumen acara. Yang lebih buruk, tidak mendukung berhenti berlangganan; dosa berat untuk $ rootScope.
alpha-mouse
3
Kurangnya berhenti berlangganan merusak jawaban ini untuk saya. Jika Anda memanggil hiEventService.listen(callback)dari pengontrol, pendengar akan tetap ada bahkan setelah pengontrol dimusnahkan. Kebocoran memori! Mengikat ke lingkup pengontrol $scope.$on("hi",callback)dilengkapi dengan pembersihan otomatis.
adamdport
32

$ rootScope. $ broadcast adalah cara mudah untuk memunculkan acara "global" yang dapat didengarkan oleh semua cakupan anak. Anda hanya perlu menggunakan $rootScopeuntuk menyiarkan pesan, karena semua cakupan turunan bisa mendengarkannya.

Cakupan root menyiarkan acara:

$rootScope.$broadcast("myEvent");

Setiap anak Scope dapat mendengarkan acara tersebut:

$scope.$on("myEvent",function () {console.log('my event occurred');} );

Mengapa kami menggunakan $ rootScope. $ Broadcast? Anda dapat menggunakan $watchuntuk mendengarkan perubahan variabel dan menjalankan fungsi saat status variabel berubah. Namun, dalam beberapa kasus, Anda hanya ingin memunculkan peristiwa yang dapat didengarkan oleh bagian lain dari aplikasi, terlepas dari perubahan apa pun dalam status variabel cakupan. Inilah saatnya $broadcastmembantu.

James Lawruk
sumber
19

Meneruskan data !!!

Saya heran mengapa tidak ada yang menyebutkan bahwa $broadcastmenerima parameter di mana Anda dapat mengirimkan Objectyang akan diterima dengan $onmenggunakan fungsi panggilan balik

Contoh:

// the object to transfert
var myObject = {
    status : 10
}

$rootScope.$broadcast('status_updated', myObject);
$scope.$on('status_updated', function(event, obj){
    console.log(obj.status); // 10
})
Merlin
sumber
8

Apa fungsi $ rootScope. $ Broadcast?

Ini menyiarkan pesan ke masing-masing pendengar di seluruh aplikasi angular, sarana yang sangat kuat untuk mentransfer pesan ke cakupan pada tingkat hierarki yang berbeda (baik itu orang tua, anak atau saudara)

Demikian pula, kami memiliki $ rootScope. $ Emit, satu-satunya perbedaan adalah yang pertama juga ditangkap oleh $ scope. $ On sedangkan yang kedua ditangkap hanya oleh $ rootScope. $ On.

lihat contoh: - http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Prashant K
sumber