Scope 간의 통신

$scope

AngularJS의 컨트롤러에서 주로 $scope을 사용해 프로그래밍을 진행한다. 근데 팝업을 띄우거나, 현재 컨트롤러에서 다른 컨트롤러와 데이터를 주고 받아야 할 때 어떻게 데이터를 주고 받을 수 있는지 알아보자.

 

scope 구조

일단 AngularJS에서 scope이 어떤 형식으로 나타날 수 있는지 아래 그림을 보자.

scope은 형제 또는 자식 scope을 가질 수 있고, 가장 최상위 scope을 Root라고 부른다. 같은 색으로 표시된 것은 같은 계층의 scope들이다.

수직적인 통신

수직적인 통신은 broadcast와 emit을 사용해 할 수 있다.

 

자신보다 상위로 보내는 것은 emit, 하위로 보내는 것은 broadcast를 사용하면 된다.

 

broadcast

$scope.$broadcast('HiChildren', 'hi');

 

broadcast는 두 개의 매개변수를 사용할 수 있는데, 첫 번째 매개변수는 메시지다. 그리고 두 번째에는 값을 보낸다. 해당 값이 아니라 변수를 사용할 수도 있다. 위의 구조에서 설명하자면 contentScope에서 broadcast를 하면 contentScope이 받을 수 있다. 하지만 같은 계층에 있는 headerScope, menuScope은 메시지를 받을 수 없다.

 

emit

$scope.$emit('HiParent', 'hi');

emit의 구조는 broadcast와 똑같지만, 상위 scope에 메시지를 전달하는 것이 broadcast와의 차이점이다. contentScope에서 보내면 자신의 상위 scope으로만 전달한다.

 

on

broadcast와 emit은 메시지를 보내는 부분이고 메시지를 받는 쪽에서는 on을 사용하면 된다.

 

$scope.$on('HiChildren', (event, data) => {
   $scope.message = data; 
});

 

on은 첫 번째는 받으려는 메시지의 이름을 받는다. 그리고 두 번째로는 콜백 함수를 받는다. 'HiChildren' 메시지가 들어오면, 뒤의 함수를 실행하는데 우리가 이전에 'hi' 로 보낸 값이 data로 들어온다.

수평적인 통신

같은 depth의 scope일 경우 부모에게 emit을 통해 값을 전달하고, 부모가 해당 값을 받으면 braodcast를 하도록 설계해야 한다. 만약 부모 scope을 모른다면 rootScope을 사용하면 된다.

 

여기서는 menuScope과 headerScope 간의 통신하는 법을 코드로 보여주도록 하겠다.

 

app.controller('menuScope', function($rootScope) {
    const val = 'hi';
    $rootScope.$broadcast('Menu', val);
});
app.controller('headerScope', function() {
    $scope.$on('Menu', (event, value) => {
        console.log(value);
    });
});