$ রুটস্কোপ। $ সম্প্রচার বনাম $ স্কোপ। mit নির্গত


349

এখন যেহেতু পারফরম্যান্সের পার্থক্যটি $broadcastএবং $emitএর মধ্যে থেকে মুছে ফেলা হয়েছে, সেখানে পছন্দ $scope.$emitকরার কোনও কারণ আছে $rootScope.$broadcastকি?

তারা পৃথক, হ্যাঁ।

$emit স্কোপ হায়ারার্কির (উপরের দিকে) সীমাবদ্ধ - এটি আপনার ডিজাইনের সাথে মানানসই হতে পারে তবে এটি আমার কাছে বরং স্বেচ্ছাসেবী বাধা বলে মনে হয়।

$rootScope.$broadcastইভেন্টটি শোনার জন্য বেছে নেওয়া সমস্ত ক্ষেত্রে কাজ করে , যা আমার মনে আরও বোধকরি বাধা।

আমি কিছু অনুপস্থিত করছি?

সম্পাদনা করুন:

উত্তরের জবাবে স্পষ্ট করার জন্য, প্রেরণের দিকনির্দেশটি আমি ইস্যু করছি না। $scope.$emitইভেন্টটি উপরের দিকে এবং $scope.$broadcastনীচে দিকে প্রেরণ করে । তবে কেন সবসময় $rootScope.$broadcastসমস্ত অভিযুক্ত শ্রোতার কাছে পৌঁছানোর জন্য ব্যবহার করবেন না ?


3
toddmotto.com/… এগুলি সবই রয়েছে
Divya MV

উত্তর:


1155

tl; dr (এই টিএল; ডাঃ নীচে @ এসপি 600 মি এর উত্তর থেকে এসেছে )

$emitএকটি ইভেন্ট উপরের দিকে $broadcastপ্রেরণ করে ... একটি ইভেন্ট নীচের দিকে প্রেরণ করে

বিস্তারিত ব্যাখ্যা

$rootScope.$emit কেবল অন্যকে দেয় $rootScope শ্রোতাদের এটি ধরতে দেয়। এটি ভাল যখন আপনি প্রতিটি $scopeএটি পেতে চান না । বেশিরভাগ ক্ষেত্রেই উচ্চ স্তরের যোগাযোগ। এটিকে বয়স্করা একে অপরের সাথে ঘরে ঘরে কথা বলুন যাতে বাচ্চারা তাদের শুনতে না পারে।

$rootScope.$broadcastএমন একটি পদ্ধতি যা সবকিছুই শুনতে দেয়। এটি বাবা-মার চিৎকারের সমতুল্য হবে যে ডিনার প্রস্তুত তাই বাড়ির সকলেই এটি শুনে।

$scope.$emitযখন আপনি এটি চান $scopeএবং তার সমস্ত বাবা-মা এবং$rootScope ইভেন্টটি শুনতেএটি এমন বাচ্চা যা বাড়িতে বাড়িতে তাদের বাবা-মাকে চিত্কার করে (তবে এমন কোনও মুদি দোকানে নয় যেখানে অন্যান্য বাচ্চারা শুনতে পারে)।

$scope.$broadcastএটি $scopeনিজের এবং তার সন্তানদের জন্য। এটি এমন একটি শিশু যা তার স্টাফ করা প্রাণীগুলিতে ফিসফিস করে বলে যাতে তাদের বাবা-মা শুনতে পান না।


3
@ নতুনদেব কারণ হ'ল আপনার পৃষ্ঠায় প্রায়শই স্কোপের পুনরাবৃত্তি হয়। আপনার যদি দুটি বা ততোধিক স্কোপগুলি ডেটার বিভিন্ন উদাহরণ উপস্থাপন করে - যেমন একটি পৃষ্ঠায় রোগীর রেকর্ডের একটি তালিকা, যার প্রতিটি তার নিজস্ব স্কোপ - তবে এটি কেবলমাত্র একটির উদ্দেশ্যে নির্মিত ইভেন্টটিকে মূল থেকে সম্প্রচার করতে কাজ করবে না it সুযোগ। $rootScopeসম্ভব হলে সম্প্রচারগুলি এড়ানো আরও ভাল পুনরায় ব্যবহারের অনুমতি দেয়।
টিম রজার্স

4
আপনি যা কিছু বলেছেন তা ভুল নয়, তবে এটি সাধারণকরণের একটি উপায় যা নথিটি শিশু স্কোপগুলিতে নেমে যায় এবং $ এমিট নথিটি পিতামাতার স্কোপে যায়। উভয়ই বর্তমান স্কোপে সংযুক্ত যে কোনও শ্রোতাকে ট্রিগার করবে।
এরিক

123
আপনি যে উদাহরণটি ব্যবহার করেছেন তা দুর্দান্ত!
আসফ 30'15

72
কি দারুন! এমনকি বাচ্চারাও এটি বুঝতে পারে! আশ্চর্যজনক :)
নবনেথ

3
নিখুঁত উদাহরণ, ব্যাখ্যাটি পছন্দ করুন
রবিন-হুডি

104

তারা একই কাজ করছে না: $emitএকটি ইভেন্ট প্রেরণ করে স্কোপ হায়ারার্কির মধ্য দিয়ে উপরের দিকে$broadcast প্রেরণ করে , যখন সমস্ত ইভেন্টের স্কোপে একটি ইভেন্টটি নীচের দিকে প্রেরণ করে ।


2
হ্যাঁ, আমি লক্ষ করেছি যে প্রশ্নে (সম্ভবত আমি প্রেরণের দিকটি সম্পর্কে এটি পরিষ্কার করে দিতে পারি)। তবে আমি আরও উল্লেখ করেছি যে এটি একটি বরং স্বেচ্ছাসেবী বাধা। আমি যদি আমার "শ্রোতার" কাছে পৌঁছতে পারি তবে আমি কেন সবসময় নীচের দিক থেকে এটি করতে পারি না $rootScope?
নতুন দেব

কারণ একটি ইমিট কোনও স্কোপের বাচ্চা বা ভাইবোনদের স্কোপগুলিকে প্রভাবিত করে না। এগুলি কেবল জাভাস্ক্রিপ্টের ইভেন্টের প্রচারের ধরণের মানচিত্র - ক্যাপচারিং এবং বুদবুদ। $ সম্প্রচার ক্যাপচারের জন্য এবং $ এমিট বুদ্বুদার জন্য ব্যবহৃত হয়। একটি আপাতদৃষ্টিতে প্রাচীন কের্কস্মোড নিবন্ধ রয়েছে যা পার্থক্যটি বেশ ভালভাবে ব্যাখ্যা করে: quirksmode.org/js/events_order.html
অ্যালান এল

77

আমি নীচের লিঙ্কটি নিম্নলিখিত লিঙ্কটি থেকে তৈরি করেছি: https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

ব্যাপ্তি, রুটস্কোপ, নির্গমন, সম্প্রচার

আপনি দেখতে পাচ্ছেন, $rootScope.$broadcastশ্রোতার চেয়ে অনেক বেশি হিট $scope.$emit

এছাড়াও, $scope.$emitবুদবুদ প্রভাব বাতিল হতে পারে, যেখানে $rootScope.$broadcastপারে না।


24
আমি তীর অনেক দেখতে।
মার্স রবার্টসন

4
@ মিচালস্টেফানো আমি ভিজ্যুয়াল উত্তরের ভক্ত :)
মারিয়া ইনেস পরনসারি

@ আমরণিসারি:। $ সম্প্রচার (নাম, আরগস) - সমস্ত ইভেন্টের $ সমস্ত শিশুদের স্কোপের মাধ্যমে একটি ইভেন্ট সম্প্রচার করুন mit নির্গমন (নাম, আরগস) - event রুটস্কোপ সহ সমস্ত পিতামাতার কাছে $ স্কোপ হায়ারার্কি - একটি ইভেন্ট প্রেরণ করুন
কোডম্যান

19

এখানে চিত্র বর্ণনা লিখুন

$ সুযোগ। mit নির্গত: এই পদ্ধতিটি ঘটনাটি উপরের দিকের দিকে প্রেরণ করে (শিশু থেকে পিতামাতার কাছে)

এখানে চিত্র বর্ণনা লিখুন $ সুযোগ। $ সম্প্রচার: পদ্ধতিটি সমস্ত শিশু নিয়ামককে নীচের দিকে (পিতামাতার থেকে সন্তানের কাছে) ইভেন্টটি প্রেরণ করে।

এখানে চিত্র বর্ণনা লিখুন $ সুযোগ। $ অন: কিছু ইভেন্ট শোনার জন্য পদ্ধতিটি নিবন্ধভুক্ত করে। এই ইভেন্টটি শুনছেন এমন সমস্ত কন্ট্রোলারই ব্রডকাস্টের নোটিফিকেশন পান বা সন্তানের পিতা-মাতা শ্রেণিবিন্যাসের ক্ষেত্রে উপযুক্ত এমন জায়গাগুলির উপর ভিত্তি করে নির্গত হয়।

Listening এমিট ইভেন্টটি ইভেন্টটি শুনছেন এমন $ সুযোগের মধ্যে যে কোনও একটি দ্বারা বাতিল করা যেতে পারে।

অন ​​"স্টপপ্রোপেশন" পদ্ধতি সরবরাহ করে। এই পদ্ধতিটি কল করে ইভেন্টটিকে আরও প্রচার থেকে থামানো যেতে পারে।

প্লাঙ্কার: https ://e એમ્બેડ.plnkr.co/0Pdrrtj3GEnMp2UpILp4/

ভাইবোনের স্কোপগুলির ক্ষেত্রে (যে স্কোপগুলি সরাসরি পিতামাতার বাচ্চার স্তরের মধ্যে নেই) তারপরে $ নির্গত এবং $ সম্প্রচার ভাইবোনদের স্কোপের সাথে যোগাযোগ করবে না।

এখানে চিত্র বর্ণনা লিখুন

আরও তথ্যের জন্য দয়া করে http://yogeshtutorials.blogspot.in/2015/12/event-based-communication-between-angularjs-controllers.html দেখুন


একটি সমাধানের একটি লিঙ্ক স্বাগত, তবে দয়া করে আপনার উত্তরটি কার্যকর না হওয়া নিশ্চিত করুন: লিঙ্কটির চারপাশে প্রসঙ্গটি যুক্ত করুন যাতে আপনার সহ ব্যবহারকারীদের কিছু ধারণা থাকতে পারে এটি কী এবং কেন এটি রয়েছে, তবে পৃষ্ঠার সর্বাধিক প্রাসঙ্গিক অংশটি উদ্ধৃত করুন ' লক্ষ্য পৃষ্ঠাটি অনুপলব্ধ ক্ষেত্রে লিঙ্কটি পুনরায় সংযুক্ত করুন। লিঙ্কের চেয়ে সামান্য বেশি উত্তরগুলি মুছতে পারে।
বাযুমের Augen MIT

উদ্দেশ্যটি ছিল কাজের প্লামকার সরবরাহ করা, তবে আমি এখানে যথাযথ বিবরণ যুক্ত করেছি।
যোগেশ

3

@ এডি জিজ্ঞাসা করা প্রশ্নের সঠিক উত্তর দিয়েছেন। তবে আমি পাব / সাব এর আরও দক্ষ পদ্ধতির ব্যবহারের দিকে দৃষ্টি আকর্ষণ করতে চাই।

যেমন এই উত্তরটি সূচিত করে,

Approach সম্প্রচার / approach পদ্ধতির ভয়াবহভাবে দক্ষ নয় কারণ এটি সমস্ত স্কোপগুলিতে সম্প্রচারিত হয় (হয় একদিকে বা স্কোপ শ্রেণিবদ্ধের উভয় দিক)। যদিও পাব / সাব অ্যাপ্রোচ অনেক বেশি সরাসরি। কেবলমাত্র গ্রাহকরা ইভেন্টগুলি পান তাই এটি কার্যকর করার জন্য এটি সিস্টেমের প্রতিটি সুযোগে যায় না।

আপনি 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);ওআর ব্যবহার করুন PubSub.unsubscribe('event-name');

দ্রষ্টব্য মেমরি ফাঁস এড়াতে সাবস্ক্রাইব করতে ভুলবেন না।


2

কোনও পরিষেবাতে আরএক্সজেএস ব্যবহার করুন

উদাহরণস্বরূপ রাষ্ট্রের অধীনে আপনার কোনও পরিষেবা রয়েছে এমন পরিস্থিতিতে কী হবে। কীভাবে আমি সেই পরিষেবায় পরিবর্তনগুলি ঠেকাতে পারি এবং পৃষ্ঠার অন্যান্য এলোমেলো উপাদানগুলি কীভাবে এই পরিবর্তন সম্পর্কে সচেতন হতে পারে? ইদানীং এই সমস্যাটি মোকাবেলায় লড়াই করা হয়েছে

কৌণিকের জন্য আরএক্সজেএস এক্সটেনশনগুলির সাথে একটি পরিষেবা তৈরি করুন ।

<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

পিএলএনকেআর- এর ডেমো

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.