AngularJS $broadcast, $emit, $on 예제

mirinae.maru 0 Comments

■ 참고
채팅창 클라이언트를 통해 Scope 이벤트 처리 이용하기
http://webframeworks.kr/tutorials/angularjs/angularjs_scope_events/

$broadcast, $emit, $on 어플리케이션 이벤트를 생성하고 이벤트의 리스너를 정의하는 프로토타입 메소드.
 
 
 

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

■ $broadcast

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

 
 
 

■ $emit

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

 
 
 

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

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

 
 
 

■ $broadcast, $on 예제1
부모 scope(parentCtrl 컨트롤)에 이벤트를 발생시키는 $broadcast 메소드를 정의하고 broadcastClick 이벤트는 parentCtrl, childCtrl 둘 다 등록하였다.

<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script src='/js/jquery/jquery-1.11.0.min.js'></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("parentCtrl", function($scope){

  $scope.$on("broadcastClick", function(event,params) {
    $scope.message = "parent scope event..."
    $scope.name = params.name;
    $scope.age = params.age;
  });

  $scope.broadcast_click = function() {
    var params = {
      name:"broadcast...",
      age:"23"
    };
    $scope.$broadcast("broadcastClick", params);
  }
});
myApp.controller("childCtrl", function($scope){
  $scope.$on("broadcastClick", function(event,params) {
    $scope.message = "child scope event..."
    $scope.name = params.name;
    $scope.age = params.age;
  });
});
</script>
</head>
<body ng-controller="parentCtrl">
  <h1>AngularJS $broadcast, $on 예제 1<br/></h1>
  <button ng-click="broadcast_click()">parent button click</button>
  <h2>
    <font color="red">{{message}}</font><br/>
    Parent Name : <font color="red">{{name}}</font><br/>
    Parent Age : <font color="red">{{age}}</font><br/>
  </h2>
  <div ng-controller="childCtrl">
    <!--<button>child button click</button>-->
    <h3>
      <font color="blue">{{message}}</font><br/>
      Child Name : <font color="blue">{{name}}</font><br/>
      Child Age : <font color="blue">{{age}}</font><br/>
    </h3>
  </div>
</body>
</html>

 
 
 

■ $broadcast, $on 실행결과 1
버튼을 클릭하면 $scope와 자식 $scope에 등록된 broadcastClick 이벤트가 둘 다 실행되었다.

 
 
 

■ $broadcast, $on 예제 2
자식 scope(childCtrl 컨트롤)에 이벤트를 발생시키는 $broadcast 메소드를 정의하였다.

<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script src='/js/jquery/jquery-1.11.0.min.js'></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("parentCtrl", function($scope){
  $scope.$on("broadcastClick", function(event,params) {
    $scope.message = "parent scope event..."
    $scope.name = params.name;
    $scope.age = params.age;
  });
});

myApp.controller("childCtrl", function($scope){

  $scope.$on("broadcastClick", function(event,params) {
    $scope.message = "child scope event..."
    $scope.name = params.name;
    $scope.age = params.age;
  });

  $scope.broadcast_click = function() {
    var params = {
      name:"broadcast...",
      age:"23"
    };
    $scope.$broadcast("broadcastClick", params);
  }
});
</script>
</head>
<body ng-controller="parentCtrl">
  <h1>AngularJS $broadcast, $on 예제 2<br/></h1>
  <!--<button>parent button click</button>-->
  <h2>
    <font color="red">{{message}}</font><br/>
    Parent Name : <font color="red">{{name}}</font><br/>
    Parent Age : <font color="red">{{age}}</font><br/>
  </h2>
  <div ng-controller="childCtrl">
    <button ng-click="broadcast_click()">child button click</button>
    <h3>
      <font color="blue">{{message}}</font><br/>
      Child Name : <font color="blue">{{name}}</font><br/>
      Child Age : <font color="blue">{{age}}</font><br/>
    </h3>
  </div>
</body>
</html>

 
 
 

■ $broadcast, $on 실행결과 2
버튼을 클릭하면 child $scope에서만 이벤트가 실행되고 parent $scope에 등록된 이벤트는 실행되지 않았다.

 
 
 

■ $emit, $on 예제 1
parent $scope에 emitClick이벤트를 발생($scope.$emit)시키고 이벤트를 등록($scope.$on)하였다. 

<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script src='/js/jquery/jquery-1.11.0.min.js'></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("parentCtrl", function($scope){
  $scope.$on("emitClick", function(event,params) {
    $scope.parent_message = "parent scope event..."
    $scope.parent_name = params.name;
    $scope.parent_age = params.age;
  });

  $scope.emit_click = function() {
    var params = {
      name:"emit...",
      age:"23"
    };
    $scope.$emit("emitClick", params);
  }
});
myApp.controller("childCtrl", function($scope){
  $scope.$on("emitClick", function(event,params) {
    $scope.child_message = "child scope event..."
    $scope.child_name = params.name;
    $scope.child_age = params.age;
  });
});
</script>
</head>
<body ng-controller="parentCtrl">
  <h1>AngularJS $emit, $on 예제 1<br/></h1>
  <button ng-click="emit_click()">parent button click</button>
  <h2>
    <font color="red">{{parent_message}}</font><br/>
    Parent Name : <font color="red">{{parent_name}}</font><br/>
    Parent Age : <font color="red">{{parent_age}}</font><br/>
  </h2>
  <div ng-controller="childCtrl">
    <!--<button>child button click</button>-->
    <h3>
      <font color="blue">{{child_message}}</font><br/>
      Child Name : <font color="blue">{{child_name}}</font><br/>
      Child Age : <font color="blue">{{child_age}}</font><br/>
    </h3>
  </div>
</body>
</html>

 
 
 

■ $emit, $on 실행결과 1
parent $scope에 emitClick이벤트를 발생($scope.$emit)시켰기 때문에 parent $scope의 이벤트만 반응을 하고 child $scope에 등록된 이벤트는 반응을 하지 않았다.

 
 
 

■ $emit, $on 예제 2
child $scope에 emitClick이벤트를 발생($scope.$emit)시키고 parent $scope와 child $scope에 이벤트를 등록($scope.$on)하였다. 

<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script src='/js/jquery/jquery-1.11.0.min.js'></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("parentCtrl", function($scope){
  $scope.$on("emitClick", function(event,params) {
    $scope.parent_message = "parent scope event..."
    $scope.parent_name = "parent " + params.name;
    $scope.parent_age = eval(params.age)+10;
  });
});
myApp.controller("childCtrl", function($scope){
  $scope.$on("emitClick", function(event,params) {
    $scope.child_message = "child scope event..."
    $scope.child_name = "child " + params.name;
    $scope.child_age = params.age-10;
  });

  $scope.emit_click = function() {
    var params = {
      name:"emit...",
      age:"23"
    };
    $scope.$emit("emitClick", params);
  }
});
</script>
</head>
<body ng-controller="parentCtrl">
  <h1>AngularJS $emit, $on 예제 2<br/></h1>
  <!--<button>parent button click</button>-->
  <h2>
    <font color="red">{{parent_message}}</font><br/>
    Parent Name : <font color="red">{{parent_name}}</font><br/>
    Parent Age : <font color="red">{{parent_age}}</font><br/>
  </h2>
  <div ng-controller="childCtrl">
    <button ng-click="emit_click()">child button click</button>
    <h3>
      <font color="blue">{{child_message}}</font><br/>
      Child Name : <font color="blue">{{child_name}}</font><br/>
      Child Age : <font color="blue">{{child_age}}</font><br/>
    </h3>
  </div>
</body>
</html>

 
 
 

■ $emit, $on 실행결과 2
child $scope에서 이벤트를 발생시켰기 때문에 parent $scope와 child $scope에 등록된 이벤트가 동시에 반응을 하였다.

 
 
 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다