$ rootScope. $ Broadcast so với $ scope. $ phát ra

Bây giờ rằng sự khác biệt về hiệu năng giữa $broadcastvà $emitđã được loại bỏ, là có lý do nào để thích $scope.$emitđể$rootScope.$broadcast ?

Họ khác nhau, vâng.

$emit được giới hạn trong hệ thống phân cấp phạm vi (trở lên) - điều này có thể tốt, nếu nó phù hợp với thiết kế của bạn, nhưng dường như đối với tôi là một hạn chế khá tùy tiện.

$rootScope.$broadcasthoạt động trên tất cả những gì chọn để lắng nghe sự kiện, đó là một hạn chế hợp lý hơn trong tâm trí của tôi.

Tui bỏ lỡ điều gì vậy?

BIÊN TẬP:

Để làm rõ để trả lời câu trả lời, hướng của công văn không phải là vấn đề tôi đang theo đuổi. $scope.$emitgửi sự kiện lên trên và $scope.$broadcast- xuống dưới. Nhưng tại sao không luôn luôn sử dụng $rootScope.$broadcastđể tiếp cận tất cả những người nghe dự định?

tl; dr (tl; dr này là từ câu trả lời của @ sp00m bên dưới)

$emitgửi một sự kiện trở lên ... $broadcastgửi một sự kiện đi xuống

Giải thích chi tiết

$rootScope.$emitchỉ cho phép $rootScopengười nghe khác bắt nó. Điều này tốt khi bạn không muốn$scope có được nó. Chủ yếu là một giao tiếp cấp cao. Hãy nghĩ về nó khi người lớn nói chuyện với nhau trong một căn phòng để những đứa trẻ không thể nghe thấy chúng.

$rootScope.$broadcastlà một phương pháp cho phép khá nhiều thứ nghe thấy nó. Điều này sẽ tương đương với việc cha mẹ la hét rằng bữa tối đã sẵn sàng để mọi người trong nhà nghe thấy.

$scope.$emitlà khi bạn muốn điều đó $scopevà tất cả cha mẹ của nó và $rootScopenghe sự kiện này. Đây là một đứa trẻ than vãn với cha mẹ ở nhà (nhưng không phải ở cửa hàng tạp hóa nơi những đứa trẻ khác có thể nghe thấy).

$scope.$broadcastlà cho $scopechính nó và con cái của nó. Đây là một đứa trẻ thì thầm với thú nhồi bông của nó để bố mẹ chúng không nghe thấy.

Họ không làm cùng một công việc: $emitgửi một sự kiện lên trên thông qua hệ thống phân cấp phạm vi, trong khi $broadcastgửi một sự kiện xuống tới tất cả các phạm vi con.

Tôi đã tạo đồ họa sau từ liên kết sau: https://toddmotto.com/all-about-angenses-emit-broadcast-on-publish-subscribeing/

Như bạn có thể thấy, $rootScope.$broadcastđánh nhiều người nghe hơn $scope.$emit.

Ngoài ra, $scope.$emithiệu ứng sủi bọt có thể bị hủy, trong khi $rootScope.$broadcastkhông thể.

$ scope. $ emit: Phương thức này gửi sự kiện theo hướng đi lên (từ con đến cha mẹ)

$ scope. $ Broadcast: Phương thức gửi sự kiện theo hướng đi xuống (từ cha mẹ sang con) đến tất cả các bộ điều khiển con.

$ scope. $ on: Phương thức đăng ký để nghe một số sự kiện. Tất cả các bộ điều khiển đang nghe sự kiện đó đều nhận được thông báo về việc phát hoặc phát dựa trên nơi mà các bộ điều khiển phù hợp với hệ thống phân cấp cha-con.

Sự kiện $ emit có thể bị hủy bởi bất kỳ ai trong phạm vi $ đang lắng nghe sự kiện.

$ On cung cấp phương thức "stopPropagation". Bằng cách gọi phương thức này, sự kiện có thể được ngừng truyền bá thêm.

Plunker: https://embed.plnkr.co/0Pdrrtj3GEnMp2UpILp4/

Trong trường hợp phạm vi anh chị em (phạm vi không nằm trong hệ thống phân cấp cha-con trực tiếp) thì $ emit và $ Broadcast sẽ không giao tiếp với phạm vi anh chị em.

Để biết thêm chi tiết, vui lòng tham khảo http://yogeshtutorials.blogspot.in/2015/12/event-basing-c truyền thông-b between-angjjs-controlers.html

@Eddie đã đưa ra một câu trả lời hoàn hảo cho câu hỏi được hỏi. Nhưng tôi muốn thu hút sự chú ý bằng cách sử dụng cách tiếp cận hiệu quả hơn của Pub / Sub.

Như câu trả lời này cho thấy,

Cách tiếp cận $ Broadcast / $ về cách tiếp cận không hiệu quả khủng khiếp vì nó phát sóng tới tất cả các phạm vi (Hoặc theo một hướng hoặc cả hai hướng của phân cấp Phạm vi). Trong khi cách tiếp cận Pub / Sub trực tiếp hơn nhiều. Chỉ những người đăng ký mới có được các sự kiện, vì vậy nó sẽ không đến mọi phạm vi trong hệ thống để làm cho nó hoạt động.

bạn có thể sử dụng angular-PubSubmô-đun góc. Khi bạn thêm PubSubmô-đun vào phụ thuộc ứng dụng của mình, bạn có thể sử dụngPubSub dịch vụ để đăng ký và hủy đăng ký các sự kiện / chủ đề.

Dễ dàng đăng ký:

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

});

Dễ dàng để xuất bản

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

Để hủy đăng ký, sử dụng PubSub.unsubscribe(sub);HOẶC PubSub.unsubscribe('event-name');.

LƯU Ý Đừng quên hủy đăng ký để tránh rò rỉ bộ nhớ.

Sử dụng RxJS trong một dịch vụ

Chẳng hạn như trong tình huống bạn có một Dịch vụ đang giữ trạng thái như thế nào. Làm cách nào tôi có thể đẩy các thay đổi đối với Dịch vụ đó và các thành phần ngẫu nhiên khác trên trang nhận thức được sự thay đổi đó? Gần đây đang vật lộn với việc giải quyết vấn đề này

Xây dựng một dịch vụ với RxJS Tiện ích mở rộng cho Angular .

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

Sau đó, chỉ cần đăng ký để thay đổi.

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();
  };
});

Khách hàng có thể đăng ký thay đổi DataService.subscribevà nhà sản xuất có thể đẩy các thay đổi vớiDataService.set .

Các DEMO trên PLNKR .