$ rootScope। $ प्रसारण बनाम $ गुंजाइश। $ emit

Question

अब जब कि बीच प्रदर्शन अंतर $broadcastऔर $emitसमाप्त कर दिया गया है, वहाँ पसंद करते हैं करने के लिए किसी भी कारण है $scope.$emitकरने के लिए $rootScope.$broadcast?

वे अलग हैं, हां।

$emit गुंजाइश पदानुक्रम (ऊपर की ओर) तक सीमित है - यह अच्छा हो सकता है, अगर यह आपके डिजाइन को फिट करता है, लेकिन यह मुझे एक मनमाना प्रतिबंध लगता है।

$rootScope.$broadcastवह सब पर काम करती हैं चुनें घटना है, जो मेरे मन में एक अधिक समझदार प्रतिबंध नहीं है सुनने के लिए।

क्या मैं कुछ भूल रहा हूँ?

संपादित करें:

एक जवाब के जवाब में स्पष्ट करने के लिए, प्रेषण की दिशा वह मुद्दा नहीं है जिसके बाद मैं हूं। $scope.$emitघटना को ऊपर की ओर भेजता है, और $scope.$broadcast- नीचे की ओर। लेकिन हमेशा $rootScope.$broadcastसभी इच्छित श्रोताओं तक पहुँचने के लिए उपयोग क्यों नहीं किया जाता है?

Comments

toddmotto.com/… में यह सब है

— दिव्य एमवी

Answer 1

tl; dr (यह tl; dr नीचे @ sp00m के उत्तर में से है)

$emitकिसी घटना को ऊपर की ओर $broadcastभेज देता है ... किसी घटना को नीचे की ओर भेज देता है

विस्तृत विवरण

$rootScope.$emitकेवल अन्य $rootScopeश्रोताओं को इसे पकड़ने देता है। यह अच्छा है जब आप $scopeइसे प्राप्त करने के लिए हर नहीं चाहते हैं । ज्यादातर एक उच्च स्तरीय संचार। इसे एक कमरे में एक-दूसरे से बात करने वाले वयस्क के रूप में सोचें ताकि बच्चे उन्हें सुन न सकें।

$rootScope.$broadcastएक ऐसा तरीका है जो बहुत कुछ सब कुछ सुनने देता है। यह माता-पिता के चिल्ला के बराबर होगा कि रात का खाना तैयार है इसलिए घर में हर कोई इसे सुनता है।

$scope.$emitजब आप चाहते हैं कि यह $scopeऔर इसके सभी माता-पिता और $rootScopeघटना को सुनने के लिए। यह एक बच्चा है जो अपने माता-पिता के घर पर रोता है (किराने की दुकान पर नहीं जहां अन्य बच्चे सुन सकते हैं)।

$scope.$broadcastके लिए है $scopeही है और अपने बच्चों। यह एक बच्चा अपने भरवां जानवरों के लिए फुसफुसाता है ताकि उनके माता-पिता सुन न सकें।

Comments

@ नवदेव कारण है क्योंकि अक्सर आप पृष्ठ पर स्कोप्स की पुनरावृत्ति होते हैं। यदि आपके पास डेटा के विभिन्न उदाहरणों का प्रतिनिधित्व करने वाले दो या अधिक स्कोप हैं - जैसे किसी पृष्ठ पर मरीज के रिकॉर्ड की एक सूची, प्रत्येक अपने स्वयं के दायरे के साथ - तो यह मूल घटना से प्रसारित करने के लिए काम नहीं करेगा जो कि उनमें से सिर्फ एक के लिए है। स्कोप। $rootScopeप्रसारण से बचना जहां संभव हो बेहतर पुन: उपयोग की अनुमति देता है।

— टिम रोजर्स

आपके द्वारा कहे गए कुछ भी गलत नहीं है, लेकिन इसे सामान्य बनाने का एक तरीका है कि $ emit डॉक्यूमेंट को चाइल्ड स्कोप में जाता है और $ emit डॉक्यूमेंट को पैरेंट स्कोप तक जाता है। दोनों मौजूदा दायरे से जुड़े किसी भी श्रोता को ट्रिगर करेंगे।

— एरिक

आपके द्वारा उपयोग किया गया उदाहरण महान है!

— असफ

वाह! इसे बच्चे भी समझ सकते हैं! अद्भुत :)

— नवनीत

बिल्कुल सही उदाहरण, स्पष्टीकरण से प्यार करें

— रॉबिन-हुडी

Answer 2

वे एक ही काम नहीं कर रहे हैं: $emitएक घटना को गुंजाइश पदानुक्रम के माध्यम से ऊपर की ओर$broadcast भेजते हैं , जबकि एक घटना को सभी बच्चे के दायरे से नीचे भेजते हैं ।

Comments

हां, मैंने ध्यान दिया कि प्रश्न में (शायद मैं प्रेषण की दिशा के बारे में स्पष्ट कर सकता था)। लेकिन मैंने यह भी कहा कि यह एक मनमाना प्रतिबंध है। अगर मैं अपने "श्रोता" तक पहुंच सकता हूं, तो मैं हमेशा इसे नीचे से क्यों नहीं कर सकता हूं $rootScope?

— नया देव

क्योंकि एक $ emit किसी स्कोप के बच्चे या सिबलिंग स्कोप को प्रभावित नहीं करेगा। ये जावास्क्रिप्ट के ईवेंट प्रचार प्रकार - कैप्चरिंग और बुब्बलिंग के लिए केवल मानचित्र हैं। $ प्रसारण का उपयोग कैप्चरिंग के लिए किया जाता है और बुबलिंग के लिए $ एमिट का उपयोग किया जाता है। अब एक प्रतीत होता है प्राचीन quirksmode लेख है जो अंतर को बहुत अच्छी तरह से समझाता है: quirksmode.org/js/events_order.html

— एलन एल।

Answer 3

मैंने निम्नलिखित लिंक से निम्नलिखित ग्राफिक बनाया: https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

जैसा कि आप देख सकते हैं, $rootScope.$broadcastबहुत अधिक श्रोताओं को हिट करता है $scope.$emit।

इसके अलावा, $scope.$emitबुदबुदाती प्रभाव को रद्द किया जा सकता है, जबकि $rootScope.$broadcastनहीं।

Comments

मुझे बहुत सारे तीर दिखाई देते हैं।

— मंगल राबर्टसन

@MichalStefanow मैं विज़ुअल जवाबों का प्रशंसक हूं :)

— मारिया इनेस पर्निसारी

@ मपरनिसारी:। $ ब्रॉडकास्ट (नाम, आर्ग्स) - सभी बच्चों के $ स्कोप के माध्यम से एक ईवेंट को नीचे प्रसारित करें। $ emit (नाम, आर्ग्स) - सभी रूट्स में $ स्कोप पदानुक्रम सहित एक ईवेंट का अनुकरण करें, जिसमें $ rootScope शामिल है

— कोड

Answer 4

$ गुंजाइश। $ emit: यह विधि ऊपर की दिशा में घटना को भेजती है (बच्चे से माता-पिता तक)

$ गुंजाइश। $ प्रसारण: विधि घटना को नीचे की दिशा में (माता-पिता से बच्चे तक) सभी बाल नियंत्रकों को भेजती है।

$ गुंजाइश। $ पर: विधि किसी घटना को सुनने के लिए पंजीकृत करती है। सभी नियंत्रक जो उस घटना को सुन रहे हैं, वे प्रसारण की अधिसूचना प्राप्त करते हैं या उन पर आधारित उत्सर्जन करते हैं, जहां वे बच्चे-माता-पिता के पदानुक्रम में फिट होते हैं।

$ Emit ईवेंट को उस $ स्कोप में से किसी एक द्वारा रद्द किया जा सकता है जो ईवेंट सुन रहा है।

$ पर "stopPropagation" विधि प्रदान करता है। इस पद्धति को कॉल करके घटना को आगे के प्रचार से रोका जा सकता है।

प्लंकर: https://embed.plnkr.co/0Pdrrtj3GEnMp2UpILp4/

सिबलिंग स्कोप के मामले में (स्कोप जो प्रत्यक्ष अभिभावक-बच्चे पदानुक्रम में नहीं हैं) तो $ एमिट और $ ब्रॉडकास्ट सिबलिंग स्कोप से संवाद नहीं करेंगे।

अधिक जानकारी के लिए कृपया http://yogeshtutorials.blogspot.in/2015/12/event-based-communication-between-angularjs-controllers.html देखें

Comments

किसी समाधान का लिंक स्वागत योग्य है, लेकिन कृपया सुनिश्चित करें कि आपका उत्तर इसके बिना उपयोगी है: लिंक के चारों ओर संदर्भ जोड़ें ताकि आपके साथी उपयोगकर्ताओं को कुछ पता चले कि यह क्या है और यह क्यों है, तो आप जिस पृष्ठ का सबसे प्रासंगिक हिस्सा उद्धृत करते हैं ' लक्ष्य पृष्ठ अनुपलब्ध होने की स्थिति में पुनः लिंक करना। ऐसे लिंक जो किसी लिंक से बहुत कम हैं उन्हें हटाया जा सकता है।

— बौम Augen mit

उद्देश्य काम कर रहे प्लंकर को प्रदान करना था, हालांकि, मैंने यहां उपयुक्त विवरण जोड़ा है।

— योगेश

Answer 5

@ ईडीआई ने पूछे गए सवाल का सही जवाब दिया है। लेकिन मैं पब / सब के अधिक कुशल दृष्टिकोण का उपयोग करने के लिए ध्यान आकर्षित करना चाहूंगा।

जैसा कि यह उत्तर बताता है,

$ $ $ $ $ $ $ $ $ $ $ $ $ $ प्रसारण / $ दृष्टिकोण पर $ बहुत बढ़िया नहीं है क्योंकि यह सभी स्कॉप्स (या तो एक दिशा या स्कोप पदानुक्रम की दोनों दिशा) में प्रसारित होता है। जबकि पब / उप दृष्टिकोण बहुत अधिक प्रत्यक्ष है। केवल ग्राहकों को ही ईवेंट मिलते हैं, इसलिए यह काम करने के लिए सिस्टम के हर दायरे में नहीं जाता है।

आप angular-PubSubकोणीय मॉड्यूल का उपयोग कर सकते हैं । एक बार जब आप PubSubअपने ऐप निर्भरता में मॉड्यूल जोड़ते हैं , तो आप PubSubईवेंट / विषयों की सदस्यता और सदस्यता समाप्त करने के लिए सेवा का उपयोग कर सकते हैं ।

सदस्यता के लिए आसान:

// Subscribe to event
var sub = PubSub.subscribe('event-name', function(topic, data){

});

प्रकाशित करना आसान है

PubSub.publish('event-name', {
    prop1: value1,
    prop2: value2
});

सदस्यता समाप्त करने के लिए, PubSub.unsubscribe(sub);OR का उपयोग करें PubSub.unsubscribe('event-name');।

नोट स्मृति लीक से बचने के लिए सदस्यता समाप्त करना न भूलें।

Answer 6

एक सेवा में RxJS का उपयोग करें

उस स्थिति के बारे में क्या जहां आपके पास एक सेवा है जो उदाहरण के लिए राज्य धारण कर रही है। मैं उस सेवा में परिवर्तन को कैसे आगे बढ़ा सकता हूं, और पृष्ठ के अन्य यादृच्छिक घटकों को इस तरह के बदलाव के बारे में पता होना चाहिए? हाल ही में इस समस्या से निपटने के लिए संघर्ष कर रहे हैं

कोणीय के लिए RxJS एक्सटेंशन के साथ एक सेवा बनाएँ ।

<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>

var app = angular.module('myApp', ['rx']);

app.factory("DataService", function(rx) {
  var subject = new rx.Subject(); 
  var data = "Initial";

  return {
      set: function set(d){
        data = d;
        subject.onNext(d);
      },
      get: function get() {
        return data;
      },
      subscribe: function (o) {
         return subject.subscribe(o);
      }
  };
});

तो बस परिवर्तनों की सदस्यता लें।

app.controller('displayCtrl', function(DataService) {
  var $ctrl = this;

  $ctrl.data = DataService.get();
  var subscription = DataService.subscribe(function onNext(d) {
      $ctrl.data = d;
  });

  this.$onDestroy = function() {
      subscription.dispose();
  };
});

ग्राहक बदलावों के लिए सदस्यता ले सकते हैं DataService.subscribeऔर निर्माता बदलावों को आगे बढ़ा सकते हैं DataService.set।

PLNKR पर डेमो ।