AngularJS는 범위(Scope)를 가지고 이는 Controller에 의하여 정해진다. 각각의 scope에 따라 다수의 컨트롤러가 사용되는데 만약
다른 컨트롤러에 특정 컨트롤러의 scope을 포함시키려면 어떻게 해야할까? 아래는 이를 가능하게 도와주는 방법 중 하나로 $scope 내장서비스의
$emit(),
$broadcast() 메소드를 알아보려한다.
먼저 Scope은 부모와 자식, 형제간으로 구분될 수 있다. 부모의 스콥에 해당하는 내용은 자식 요소에서 참조가 가능하다. 물론 사용자가 별개의 Scope을 생성하지 않았을 경우를 말한다. 만약, 형제간의 스콥을 서로 공유하려면 어떻게 할 수 있을까? 아래의 예제를 통하여 알아보자.
# 서로 다른 scope의 변수를 전달하기
만약 각각의 스콥이 존재하고 변수 var1 그리고 var2가 존재한다고 생각해보자. script는 아래와 같을 것이다.
위 컨트롤러는 아래처럼 서로 형제간의 계층구조를 갖는다.
이 때 test2 컨트롤러가 test1이 가지고 있는 변수 var1에 접근하기 위하여 앞으로 두 개의 메소드를 사용할 것이다.
- $emit() - 특정 범위를 이벤트로 부모에게 전달
- $broadcast() - 특정 범위를 모든 자식에게 전달
추가로 이벤트를 확인하기 위하여 $on() 메소드를 사용한다. 위 과정을 일련순으로 정리하면 아래와 같다.
- test1에서 부모로 scope을 전달
- parent는 $on() 메소드를 사용하여 이벤트를 감지
- parent가 전달받은 값(범위)을 $broadcast() 메소드를 사용하여 자식요소로 전달
이제 test2 컨트롤러는 부모 parent 컨트롤러로부터 전달받은 스콥을 통하여 var1에 접근할 수 있게 되었다.
# $broadcast를 사용한 이벤트 전달하기
자식에 위치한 모든 컨트롤러에 이벤트를 전달한다.
만약 모든 컨트롤러에 값, 이벤트를 전달할 경우 $rootScope을 사용할 수 있다.
rootScope은 최상위 스코프로 모든 컨트롤러가 이에 포함되어 있다.
? 부모 컨트롤러가 없는 경우참고로, 만약 부모 컨트롤러가 따로 존재하지 않는다면
$rootScope을 활용하는 방법이 있다. 이 스코프는 항상 존재한다.