$broadcast, $emit, $rootScope.$on와 $scope.$on 이벤트 발생, 핸들러 등록

아래 블로그와 추가로 다른 블로그 글을 읽고 정리중임..

http://blog.iotinfra.net/?p=2080

 

■ 이벤트 발생 : 이벤트를 발생시키는 API는 $scope객체의 $broadcast와 $emit 메소드가 있다.
$broadcast  : 이벤트 -> 자식 $scope .  특정 이벤트의 이름으로 주어진 데이터와 함께 이벤트를 발생시키고

$emit           : 이벤트 -> 부모 $scope.   특정 이벤트의 이름으로 주어진 데이터와 함께 이벤트를 발생시킨다.
 

■ $broadcast

1 2	$broadcast(이벤트 이름, 인자들...) $scope.$broadcast("childClick", {name:"broadcast test",age:"23"})

  

■ $emit

1 2	$emit(이벤트 이름, 인자들...) $scope.$emit("parentClick", {name:"emit test",age:"32"})

■ 이벤트 등록 : $broadcast, $emit를 통해서 발생된 이벤트는 모두 $on메소드를 통해서 이벤트 이름에 해당하는 이벤트 리스너 함수를 등록할 수 있다.
$on

1 2 3 4 5 6 7 8 9

$on(이벤트 이름, 리스너 함수) $scope.$on("parentClick", function(event,message) {   console.log("parentClick name : " + message.name);   console.log("parentClick age : " + message.age); }); $scope.$on("childClick", function(event,message) {   console.log("childClick name : " + message.name);   console.log("childClick age : " + message.age); });

•  
•  
•  
•  
• AngularJS의 run() 메서드의 두번째 함수는,  앱의 최초 부트스트래핑 과정에서 실행됨.  main() 함수와 유사하게 진입점 기능을 한다고 볼 수 있음.
• run() 메서드의 실행 시점은 config()와 controller() 사이이다. 앱의 전체 스코프에 필요한 이벤트 핸들러 등을 작성할 때 유용하다.
• AngularJS는 $rootScope로 불리우는 단 1개의 스코프와 자손에 해당하는 복수개의 $scope를 제공한다. $rootScope의 범위는 바로 ng-app 디렉티브가 명시된 범위와 일치한다.
• $rootScope와 모든 자손 스코프에는 특정 이벤트에 대한 이벤트 핸들러 함수를 등록할 수 있다. 위의 경우 URL 라우팅의 스테이트 전환시 발생하는 $stateChangeStart에 대한 이벤트 핸들러를 등록한 예이다.