$rootScope($rootScope 。$140 대$140입니다.$140

$rootScope($rootScope 。$140 대$140입니다.$140

이제 퍼포먼스 차이가 나기 때문에$broadcast그리고.$emit제거되었습니다. 더 선호할 이유가 있나요?$scope.$emit로.$rootScope.$broadcast?

그들은 달라요, 네.

$emit는 스코프 계층(표준)으로 제한되어 있습니다.설계에 맞는다면 좋을지도 모르지만, 제멋대로의 제한이라고 생각합니다.

$rootScope.$broadcast듣는 것을 선택하는 모든 사람에게 효과가 있다는 것이 제 마음속의 더 합리적인 제한입니다.

내가 뭘 빼놓았나요?

편집:

답변에 따라 명확하게 말씀드리면, 디스패치의 방향은 제가 원하는 문제가 아닙니다. $scope.$emit이벤트를 위쪽으로 디스패치합니다.$scope.$broadcast- 아래쪽에 있습니다.하지만 왜 항상 사용하지 않는가?$rootScope.$broadcast원하는 청취자에게 다가갈 수 있을까요?

dr;dr (이 tl;dr은 아래 @sp00m의 답변에서 나온 것입니다.)

$emit사건을 ...위로 급파하다. $broadcast이벤트를 아래로 디스패치하다

상세설명

$rootScope.$emit다른 것만을 허락하다$rootScope듣는 사람이 알아챈다.이건 네가 모든 걸 원하지 않을 때 좋은 거야$scope얻을 수 있습니다.대부분 높은 수준의 의사소통이죠아이들이 듣지 못하게 어른들이 방에서 서로 대화한다고 생각해 보세요.

$rootScope.$broadcast거의 모든 사람이 들을 수 있는 방법입니다.이것은 부모님들이 저녁이 준비되었다고 소리치는 것과 맞먹는다. 그래서 집에 있는 모든 사람들이 그것을 듣게 된다.

$scope.$emit당신이 그것을 원할 때$scope그리고 그 모든 부모들$rootScope이벤트를 듣습니다.이것은 아이가 집에서 부모에게 칭얼거리는 것입니다(다른 아이들이 들을 수 있는 식료품점에서가 아닙니다).

$scope.$broadcast를 위한$scope그 자체와 그 자식들.아이가 인형에게 속삭이는 거예요부모가 듣지 못하게요

같은 작업을 하고 있지 않습니다.$emit는 스코프 계층을 통해 이벤트를 위쪽으로 디스패치합니다.$broadcast는 이벤트를 모든 자 스코프로 디스패치합니다.

다음 링크에서 다음 그래픽을 만들었습니다.https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

당신이 볼 수 있듯이.$rootScope.$broadcast보다 훨씬 더 많은 청취자를 강타하다$scope.$emit.

또한.$scope.$emit의 버블 효과를 취소할 수 있지만,$rootScope.$broadcast수 없다.

$190.$190:이 메서드는 이벤트를 위쪽으로(자녀에서 부모로) 디스패치합니다.

$140입니다.$140:메서드는 이벤트를 아래쪽 방향(부모에서 자녀로)으로 모든 자녀 컨트롤러로 디스패치합니다.

$140입니다.$on: 메서드는 이벤트를 듣기 위해 등록합니다.이 이벤트를 리슨하는 모든 컨트롤러는 자녀-부모 계층 내 어디에 해당하는지에 따라 브로드캐스트 또는 방출 알림을 받습니다.

$emit 이벤트는 이벤트를 듣고 있는 $scope 중 한 명이 취소할 수 있습니다.

$on은 "Stop Propagation" 메서드를 제공합니다.이 메서드를 호출하면 이벤트가 더 이상 전파되지 않도록 할 수 있습니다.

플런커 : https://embed.plnkr.co/0Pdrrtj3GEnMp2UpILp4/

형제 범위(직접 부모-자녀 계층에 없는 범위)의 경우 $emit 및 $broadcast는 형제 범위와 통신하지 않습니다.

상세한 것에 대하여는, http://yogeshtutorials.blogspot.in/2015/12/event-based-communication-between-angularjs-controllers.html 를 참조해 주세요.

@에디는 질문에 딱 맞는 대답을 했다.다만, Pub/Sub의 보다 효율적인 어프로치를 사용하는 것에 주목하고 싶다.

이 답변에서 알 수 있듯이

$broadcast/$on 접근 방식은 모든 범위에 브로드캐스트되므로 그다지 효율적이지 않습니다(Scope 계층의 한 방향 또는 양방향).반면에 Pub/Sub 접근법은 훨씬 더 직접적이다.이벤트는 서브스크라이버만이 취득하기 때문에 시스템 내의 모든 범위에서 동작하는 것은 아닙니다.

각도 모듈을 사용할 수 있습니다.일단 추가하면PubSub dependency, 를 사용할 수 .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');.

메모 메모리 누수를 방지하기 위해 등록 해제를 잊지 마십시오.

서비스에서 RxJ 사용

예를 들어 서비스를 보류하고 있는 상황에서는 어떨까요?해당 서비스 및 페이지의 기타 임의의 컴포넌트에 변경을 푸시하려면 어떻게 해야 합니까?최근 이 문제에 대처하는 데 어려움을 겪고 있다.

RxJS Extensions for 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);
      }
  };
});

변경 내용을 구독하기만 하면 됩니다.

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 데모

언급URL : https://stackoverflow.com/questions/26752030/rootscope-broadcast-vs-scope-emit