2014-07-18 35 views
93

試圖找到AngularJS $rootScope.$broadcast的一些基本信息,但AngularJS文檔沒有多大幫助。簡單地說,我們爲什麼要使用它?

此外,約翰爸爸的Hot Towel模板中有一個名爲$broadcast共同模塊中的自定義函數:

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

我不明白這是什麼做的。所以這裏有幾個基本問​​題:

1)$rootScope.$broadcast是做什麼的?

2)$rootScope.$broadcast$rootScope.$broadcast.apply有什麼區別?

+2

https://developer.mozilla.org/en- US/docs/JavaScript/Reference/Global_Objects/Function/apply – Blackhole

+0

http://mariuszprzydatek.com/2013/12/28/sharing-data-between-controllers-in-angularjs-pubsub-event-bus-example/ –

+0

' $ rootScope。$ broadcast.apply()'被使用,因爲如果你想要pa將特殊的'arguments'對象轉換爲另一個函數,則需要使用'apply()'(而不是'call()')。 除了@Blackhole鏈接到應用的MDN頁面之外,您還可以查看['arguments']上的條目(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /功能/參數)。 –

回答

70
  1. $rootScope.$broadcast是做什麼用的?

    $rootScope.$broadcast通過應用程序範圍發送事件。 該應用程序的任何子範圍都可以使用簡單的:$scope.$on()來捕捉它。

    當你想達到一個範圍,是不是直接的父(母的,例如一個分支)

    這是發送事件特別有用!有一件事不是但是是從控制器使用$rootScope.$on$rootScope是應用程序,當你的控制器被銷燬時,事件監聽器仍然存在,並且當你的控制器將被再次創建時,它將會堆積更多的事件監聽器。 (所以一次廣播將被多次捕捉)。相反,使用$scope.$on(),聽衆也將被銷燬。

  2. $rootScope.$broadcast & $rootScope.$broadcast.apply有什麼區別?

    有時您必須使用apply(),特別是在使用指令和其他JS庫時。但是因爲我不知道這個代碼庫,所以我無法分辨這是否是這種情況。

+7

對'$ rootScope。$ on'內存泄漏產生了很大的影響。這也適用於接受的答案,因爲控制器可能會調用他創建的'hiEventService'。 – adamdport

+0

什麼是您將使用'$ broadcast'與'$ broadcast.apply()' – guest

+0

$ rootScope。$ broadcast的示例,它將事件發送給所有偵聽器,而不僅僅是來自子範圍的偵聽器。 $ scope。$ broadcast將事件限制到子範圍 –

149

$rootScope基本上用作事件監聽器和調度器。

要回答它如何使用的問題,它與rootScope.$on一起使用;

$rootScope.$broadcast("hi"); 

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

然而,這是一個不好的做法,使用$rootScope爲自己的應用程序的一般事件服務,因爲你很快就會在每一個應用程序依賴於$ rootScope的情況下結束了,而你不知道是什麼成分傾聽什麼事件。

最佳做法是爲每個要收聽或播放的自定義事件創建一項服務。

.service("hiEventService",function($rootScope) { 
    this.broadcast = function() {$rootScope.$broadcast("hi")} 
    this.listen = function(callback) {$rootScope.$on("hi",callback)} 
}) 
+4

感謝@itcouldevenbeabout是不是這一行調用將事件附加到全局$ rootScope的相同邏輯?函數(){$ rootScope。$ broadcast(「hi」)},你提到的是一個不好的做法? – Nexus23

+11

使用服務進行廣播並附加特定事件的聽衆可以避免您不確定誰正在傾聽的情況。變得清楚哪些組件將事件服務作爲依賴關係 – CoolTapes

+0

多好的答案,謝謝! –

8

是什麼$ rootScope。$廣播嗎?

這將信息廣播到各自的聽衆遍佈角的應用程序,一個非常有力的手段來傳輸的消息在不同的層級,以作用域(無論是父母,子女或兄弟姐妹)

同樣,我們有$ rootScope。$ emit,唯一的區別是前者也被$ scope所捕獲。而$後者僅被$ rootScope。$所捕獲。

指的例子: - 。http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

+0

關於範圍界定的非常好的文章,謝謝! –

32

$ rootScope $廣播是提高「全球性」的事件,所有子作用域可以監聽的便捷方式。您只需使用$rootScope來廣播該消息,因爲所有後代作用域都可以偵聽它。

根範圍廣播事件:

$rootScope.$broadcast("myEvent"); 

的任何子範圍可以監聽的事件:

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

爲什麼我們使用$ rootScope $廣播?您可以使用$watch來偵聽變量更改並在變量狀態更改時執行函數。但是,在某些情況下,只需要引發應用程序的其他部分可以偵聽的事件,而不考慮範圍變量狀態的任何更改。這是$broadcast有幫助。

7

傳遞數據!!!

$broadcast接受一個參數在這裏可以通過$on用回調函數

實施例通過將被接收的Object

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

$rootScope.$broadcast('status_updated', myObject); 

$rootScope.$on('status_updated', function(event, obj){ 
    console.log(obj.status); // 10 
}) 
相關問題