हम AngularJS में $ rootScope $ का उपयोग क्यों करते हैं?


109

AngularJS के लिए कुछ बुनियादी जानकारी खोजने की कोशिश की $rootScope.$broadcast, लेकिन AngularJS प्रलेखन बहुत मदद नहीं करता है। आसान शब्दों में हम इसका उपयोग क्यों करते हैं?

इसके अलावा, जॉन पापा के हॉट तौलिया टेम्पलेट के अंदर आम मॉड्यूल में एक कस्टम फ़ंक्शन है $broadcast:

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

मुझे समझ नहीं आया कि यह क्या कर रहा है। तो यहाँ कुछ बुनियादी सवाल हैं:

1) क्या करता $rootScope.$broadcastहै?

२) क्या अंतर है $rootScope.$broadcastऔर $rootScope.$broadcast.apply?




$rootScope.$broadcast.apply()उपयोग किया जाता है क्योंकि यदि आप argumentsकिसी अन्य फ़ंक्शन के लिए विशेष ऑब्जेक्ट पास करना चाहते हैं , तो आपको उपयोग करने की आवश्यकता है apply()(जैसा कि विरोध किया गया है call())। आवेदन पर एमडीएन पृष्ठ पर @ ब्लैकहोल के लिंक के अलावा, आप प्रविष्टि की जांच भी कर सकते हैं arguments
स्कॉट स्कूपबैच

जवाबों:


97
  1. क्या करता $rootScope.$broadcastहै?

    $rootScope.$broadcastएप्लिकेशन स्कोप के माध्यम से ईवेंट भेज रहा है। उस एप्लिकेशन का कोई भी बच्चा गुंजाइश एक साधारण का उपयोग करके इसे पकड़ सकता है $scope.$on():।

    घटनाओं को भेजने के लिए विशेष रूप से उपयोगी है जब आप उस दायरे तक पहुंचना चाहते हैं जो प्रत्यक्ष माता-पिता नहीं है (उदाहरण के लिए माता-पिता की एक शाखा)

    !!! हालाँकि ऐसा नहीं करने के लिए एक बात $rootScope.$onएक नियंत्रक से उपयोग करना है। $rootScopeअनुप्रयोग है, जब आपका नियंत्रक नष्ट हो जाता है कि घटना श्रोता अभी भी मौजूद रहेगा, और जब आपका नियंत्रक फिर से बनाया जाएगा, तो यह बस अधिक घटना श्रोताओं को ढेर कर देगा। (इसलिए एक प्रसारण को कई बार पकड़ा जाएगा)। $scope.$on()इसके बजाय उपयोग करें , और सुनने वाले भी नष्ट हो जाएंगे।

  2. बीच क्या अंतर है $rootScope.$broadcastऔर $rootScope.$broadcast.apply?

    कभी-कभी आपको उपयोग करना पड़ता है apply(), खासकर जब निर्देशों और अन्य जेएस पुस्तकालयों के साथ काम करना। हालाँकि जब से मुझे पता नहीं है कि कोड आधार है, तो मैं यह नहीं बता पाऊंगा कि क्या यहां मामला है।


11
$rootScope.$onमेमोरी लीक पर शानदार पकड़ । यह स्वीकृत उत्तर पर भी लागू होता है, क्योंकि नियंत्रकों द्वारा hiEventServiceबनाए गए फोन को कॉल करने की संभावना है ।
adamdport

क्या एक उदाहरण है जहाँ आप का प्रयोग करेंगे है $broadcastबनाम$broadcast.apply()
अतिथि

$ rootScope। $ प्रसारण घटना को सभी श्रोताओं को भेजता है, न केवल बच्चों के स्कोप से श्रोता। $ स्कोप। $ ब्रॉडकास्ट घटना को चाइल्ड स्कोप तक सीमित करता है
गीर्ट बेलेमैन्स

157

$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 में किसी घटना को संलग्न करने के समान तर्क को कॉल नहीं कर रही है? function () {$ rootScope। $ ब्रॉडकास्ट ("hi")}, जिसका आपने उल्लेख किया है वह एक बुरा अभ्यास है?
Nexus23

11
प्रसारण बनाने के लिए एक सेवा का उपयोग करना और एक विशिष्ट घटना के लिए श्रोताओं को संलग्न करना भी उस स्थिति से बचा जाता है जहाँ आपको यकीन नहीं होता कि कौन सुन रहा है। यह स्पष्ट हो जाता है कि किन घटकों पर निर्भरता के रूप में ईवेंट सेवा है
कूलटेप्स

4
केवल $ emit और $ प्रसारण के बीच के अंतर की खोज करने के बाद, मैं यह कहना चाहूंगा कि यह $ emit के लिए बेहतर होगा - इस तरह से आप स्कोप के सबसे छोटे संभावित सेट में घटना को प्रदूषित कर रहे हैं, (आदर्श रूप से सेवा होगी) यह अपना दायरा है, लेकिन मुझे नहीं लगता कि यह संभव है?)
ब्रोंडहल

3
-1। मैं नहीं देखता कि किसी सेवा में अलगाव केवल प्रसारण से कहीं बेहतर है। वैसे भी, सेवा में बेहतर निजी दायरे का उपयोग करें। और $ इमिट का बेहतर उपयोग करें, न कि $ प्रसारण का। साथ ही आपकी प्रस्तावित सेवा इवेंट तर्कों का समर्थन नहीं करती है। क्या बुरा है यह सदस्यता रद्द करने का समर्थन नहीं करता है; $ rootScope के लिए एक नश्वर पाप।
अल्फा-माउस

3
सदस्यता समाप्ति की कमी मेरे लिए इस जवाब को बर्बाद कर देती है। यदि आप hiEventService.listen(callback)किसी नियंत्रक से कॉल करते हैं , तो नियंत्रक के नष्ट होने के बाद भी श्रोता मौजूद रहेगा। स्मृति रिसाव! कंट्रोलर स्कोप से बाइंडिंग $scope.$on("hi",callback)स्वचालित सफाई के साथ आती है।
adamdport

32

$ rootScope। $ प्रसारण एक "वैश्विक" घटना को बढ़ाने के लिए एक सुविधाजनक तरीका है जिसे सभी बच्चे स्कोप्स सुन सकते हैं। आपको केवल $rootScopeसंदेश प्रसारित करने के लिए उपयोग करने की आवश्यकता है , क्योंकि सभी वंशज स्कोप इसके लिए सुन सकते हैं।

रूट स्कोप घटना को प्रसारित करता है:

$rootScope.$broadcast("myEvent");

कोई भी बच्चा स्कोप घटना के लिए सुन सकता है:

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

हम $ rootScope का उपयोग क्यों करते हैं। $ प्रसारण? आप $watchपरिवर्तनशील परिवर्तन के लिए सुनने के लिए उपयोग कर सकते हैं और चर अवस्था बदलने पर कार्यों को निष्पादित कर सकते हैं । हालांकि, कुछ मामलों में, आप बस एक ऐसी घटना को उठाना चाहते हैं, जो अनुप्रयोग के अन्य भागों के लिए सुन सकता है, चाहे गुंजाइश चर स्थिति में कोई भी परिवर्तन हो। यह तब है जब $broadcastमददगार है।


19

पासिंग डेटा !!!

मुझे आश्चर्य है कि कोई भी उल्लेख क्यों नहीं करता है कि $broadcastएक पैरामीटर स्वीकार करें जहां आप कॉलबैक फ़ंक्शन का उपयोग करके Objectप्राप्त कर सकते हैं$on

उदाहरण:

// 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
})

8

$ प्रसारण क्या करता है।

यह कोणीय ऐप पर सभी श्रोताओं को संदेश प्रसारित करता है, विभिन्न पदानुक्रमित स्तर पर संदेश भेजने के लिए एक बहुत शक्तिशाली साधन है (माता-पिता, बच्चे या भाई-बहन हों)

इसी तरह, हमारे पास $ rootScope है। $ emit, एकमात्र अंतर यह है कि पूर्व को भी $ स्कोप द्वारा पकड़ा जाता है। $ पर, जबकि बाद में केवल $ rootScope द्वारा पकड़ा जाता है। $ पर।

उदाहरण के लिए देखें: - http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.