[AngularJS] $broadcast & $on 사용법 / $broadcast 와 $emit 의 차이점

[AngularJS] $broadcast & $on 사용법 / $broadcast 와 $emit 의 차이점

 

 

 

 

 

 

 

 

 

AngularJS 를 사용하다보면 서로 다른 controller 간의
data 를 보내거나, 알림을 주는 등의 event 를 설정해야 할 때가 있다.

가령 A controller 에서 어떤 이벤트가 발생하면, 
B controller 에서 그 이벤트를 캐치해서 어떤 추가 동작을 한다던지 말이다.

이 때 사용할 수 있는 $broadcast & $emit, 그리고 $on 에 대해 알아보자.

 

 

 

 

 

 

 

 

1) $broadcast 

$scope.$broadcast("myEvent", data);

=> 현재의 controller 로부터 모든 child controller 에 이벤트가 전파된다.

 

 

 

 

 

 

2) $emit

$scope.$emit("myEvent", data);

=> 현재의 controller 로부터 모든 parent controller 에 이벤트가 전파된다.

 

 

이 때, 

"myEvent" 는 내가 쓰고싶은 아무 이벤트명이나 정할 수 있고,
data는 "myEvent" 를 캐치하는 쪽에 보내고 싶은 아무 data 를 넣어줄 수 있다. 
(data는 optional 이므로, 생략가능하다)

 

 

 

 

 

 

3) $on

$scope.$on("myEvent", function(event, data) {
     //수행하고자 하는 코드
});

=> 위에서 전파된 이벤트를 캐치한다.

 

 

 

parent - child 관계의 controller 에서는,

밑으로 내려가려거든 $broadcast 를 사용하고,

위로 올라가려거든 $emit 을 사용하면 간편하다.

 

 

 

 

 

 

 

 

 

 

그런데,

sibling controller 관계에서는?

 

=> $emit 보다는 $broadcast 가 더 유용하다! 대신, $rootScope 을 사용한다!

 

 

 

 

 

 

 

controller A (이벤트를 발생):

 

$rootScope.$broadcast("myEvent", data);

 

 

 

 

 

controller B (이벤트를 캐치함):

 

$scope.$on("myEvent", function(event, data) {
     //수행하고자 하는 코드
});

 

 

 

 

 

 

 

 

 

 

 

 

 

data 의 변화를 감지하고 그걸 캐치하고 싶다면?

https://devinserengeti.tistory.com/10?category=901018

[AngularJS] $watch 사용법