AngularJS에서 $ broadcast (), $ emit () 및 $ on () 사용

AngularJS에서 $ broadcast (), $ emit () 및 $ on () 사용

---

$Broadcast(), $Emit()And $On()는 한 컨트롤러에서 이벤트를 발생시키고 다른 컨트롤러에서 처리하는 데 사용 된다는 것을 이해합니다 . 가능하다면 누군가 내가 처음 접했을 때 위의 세 가지 사용법에 대한 실시간 예를 나에게 줄 수 angular JS있습니까?

다음 링크를 통해 기본적인 사용법을 이해했습니다.

http://www.binaryintellect.net/articles/5d8be0b6-e294-457e-82b0-ba7cc10cae0e.aspx

---

$ emit

범위 계층을 통해 이벤트 이름을 위쪽으로 전달하고 등록 된 $rootScope.Scope리스너 에게 알립니다 . 이벤트 라이프 사이클 $emit은 호출 된 범위에서 시작됩니다 . 이벤트는 루트 범위를 향해 위쪽으로 이동하여 등록 된 모든 리스너를 호출합니다. 리스너 중 하나가 이벤트를 취소하면 이벤트 전파가 중지됩니다.

$ broadcast

이벤트 이름을 모든 하위 범위 (및 해당 하위)로 $rootScope.Scope전달 하고 등록 된 리스너 에게 알립니다 . 이벤트 라이프 사이클 $broadcast은 호출 된 범위에서 시작됩니다 . 이 범위의 이벤트에 대한 모든 리스너는 알림을받습니다. 그 후 이벤트는 하위 범위를 향해 아래쪽으로 이동하여 등록 된 모든 리스너를 호출합니다. 이벤트는 취소 할 수 없습니다.

$ on

주어진 유형의 이벤트를 수신합니다. $broadcast및에 의해 전달 된 이벤트를 포착 할 수 있습니다 $emit.

---

비주얼 데모 :

스코프 트리 (상위 / 하위 관계)를 시각적으로 보여주는 데모 작업 코드 :
http://plnkr.co/edit/am6IDw?p=preview

메서드 호출을 보여줍니다.

  $scope.$on('eventEmitedName', function(event, data) ...
  $scope.broadcastEvent
  $scope.emitEvent

---

• 브로드 캐스트 : 부모에서 자식으로 값을 전달할 수 있습니다 (예 : 부모-> 자식 컨트롤러).
• Emit : 자식에서 부모로 값을 전달할 수 있습니다 (예 : 자식-> 부모 컨트롤러).
• On : $broadcast또는에 의해 전달 된 이벤트를 잡습니다 $emit.

---

이 작은 예제는 $rootScope다른 컨트롤러의 자식 범위에서 수신 할 이벤트를 내보내는 방법을 보여줍니다 .

(function(){


angular
  .module('ExampleApp',[]);

angular
  .module('ExampleApp')
  .controller('ExampleController1', Controller1);

Controller1.$inject = ['$rootScope'];

function Controller1($rootScope) {
  var vm = this, 
      message = 'Hi my children scope boy';

  vm.sayHi = sayHi;

  function sayHi(){
    $rootScope.$broadcast('greeting', message);
  }

}

angular
  .module('ExampleApp')
  .controller('ExampleController2', Controller2);

Controller2.$inject = ['$scope'];

function Controller2($scope) {
  var vm = this;

  $scope.$on('greeting', listenGreeting)

  function listenGreeting($event, message){
    alert(['Message received',message].join(' : '));
  }

}


})();

http://codepen.io/gpincheiraa/pen/xOZwqa

@gayathri bottom의 답변은 범위 각도 개념과 그 구현 $scope및 $rootScope.

참조 URL : https://stackoverflow.com/questions/37717493/usage-of-broadcast-emit-and-on-in-angularjs