웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

범위 scope을 전달하는 메소드 $emit() $broadcast() 알아보기

Last Modified : 2017-04-26 / Created : 2017-03-07
12,232
View Count
AngularJS는 범위(Scope)를 가지고 이는 Controller에 의하여 정해진다. 각각의 scope에 따라 다수의 컨트롤러가 사용되는데 만약 다른 컨트롤러에 특정 컨트롤러의 scope을 포함시키려면 어떻게 해야할까? 아래는 이를 가능하게 도와주는 방법 중 하나로 $scope 내장서비스의 $emit(), $broadcast() 메소드를 알아보려한다.

먼저 Scope은 부모와 자식, 형제간으로 구분될 수 있다. 부모의 스콥에 해당하는 내용은 자식 요소에서 참조가 가능하다. 물론 사용자가 별개의 Scope을 생성하지 않았을 경우를 말한다. 만약, 형제간의 스콥을 서로 공유하려면 어떻게 할 수 있을까? 아래의 예제를 통하여 알아보자.


# 서로 다른 scope의 변수를 전달하기


만약 각각의 스콥이 존재하고 변수 var1 그리고 var2가 존재한다고 생각해보자. script는 아래와 같을 것이다.

var app = angular.module('scopeTest', []);
app.controller('test1', function($scope) {
  $scope.var1 = 'abc';
});

app.controller('test2', function($scope) {
  $scope.var2 = 'def';
});


위 컨트롤러는 아래처럼 서로 형제간의 계층구조를 갖는다.

<body ng-controller="parentCtrl">
  <div ng-controller="test1">
    {{ var1 }}
  </div>
  <div ng-controller="test2">
    {{ var2 }}
  </div>
</body>

이 때 test2 컨트롤러가 test1이 가지고 있는 변수 var1에 접근하기 위하여 앞으로 두 개의 메소드를 사용할 것이다.

  • $emit() - 특정 범위를 이벤트로 부모에게 전달
  • $broadcast() - 특정 범위를 모든 자식에게 전달

추가로 이벤트를 확인하기 위하여 $on() 메소드를 사용한다. 위 과정을 일련순으로 정리하면 아래와 같다.
  • test1에서 부모로 scope을 전달
  • parent는 $on() 메소드를 사용하여 이벤트를 감지
  • parent가 전달받은 값(범위)을 $broadcast() 메소드를 사용하여 자식요소로 전달

 
app.controller('test1', function($scope) {
  $scope.var1 = 'ab';
  $scope.$emit('sendVar2', $scope.var1);
});

app.controller('parent', function($scope) {
  $scope.$on('sendVar2', function(event, data) {
    $scope.var1 = data;
  });
}

이제 test2 컨트롤러는 부모 parent 컨트롤러로부터 전달받은 스콥을 통하여 var1에 접근할 수 있게 되었다.


# $broadcast를 사용한 이벤트 전달하기


자식에 위치한 모든 컨트롤러에 이벤트를 전달한다.

app.controller('parent', function($scope) {
  $scope.result = 'Finished';
  $scope.$broadcast('myStatus', result);
});

app.controller('test2', function($scope) {
$scope.on('myStatus', listenStatus);

function listenStatus(event, status) {
console.log(status);
}
});

만약 모든 컨트롤러에 값, 이벤트를 전달할 경우 $rootScope을 사용할 수 있다.

app.controller('parent', function($rootScope) {
  $scope.result = 'Finished';
  $rootScope.$broadcast('myStatus', result);
});
rootScope은 최상위 스코프로 모든 컨트롤러가 이에 포함되어 있다.
​​​​​​​

? 부모 컨트롤러가 없는 경우
참고로, 만약 부모 컨트롤러가 따로 존재하지 않는다면 $rootScope을 활용하는 방법이 있다. 이 스코프는 항상 존재한다.




Previous

자바스크립트 배열 array의 이해 그리고 예제

Previous

제이쿼리 extend(), 객체 합치기