AngularJS $scope 계층구조

AngularJS $rootScope, $scope

Scope 타입

$scope 객체나 $rootScope 객체는 AngularJS 내부에서 정의하는 Scope 타입의 인스턴스다. 즉, 다음과 같이 별도의 생성자 함수가 AngularJS 내부에 정의돼 있다.

function Scope(){ ... }

Scope.prototype.$apply = function(){};
Scope.prototype.$digest = function(){ ... };
Scope.prototype.$watch = function(){ ... };
Scope.prototype.$new = function(){ ... };
//...

AngularJS는 초기 부트스트랩 시 프레임워크 내부에서 $rootScope을 new Sceop()과 같이 생성한 후 해당 $rootSceope을 서비스로 제공한다. 그리고 ng-controller나 웹 애플리케이션에서는 다음과 같이 $rootScope를 이용해 $scope 객체들을 만들 수 있다.

var $scope = $rootScope.$new();

scope 타입의 프로토타입 매서드

$apply(표현식 혹은 함수)

주로 외부 확ㄴ경에서 AngularJS 표현식을 실행할 때 사용ㅇ한다. 즉, 외부 라이브러리로 이벤트를 처리할 때나 setTimeout 매서드를 사용할 때 사용한다. 인자로 표현식이나 함수를 전달 할 수 있다. 표현식을 전달하면 해당 표현식을 계산하고 함수를 전달하면 함수를 실행시킨다. 그리고 내부적으로 $rootScope의 $digest를 실행해 등록된 모든 $watch를 실행하게 된다.

$broadcast(이벤트 이름, 인자들...)

첫 번째 인자인 이벤트 이름으로 하는 이벤트를 모든 하위 $scope에게 발생시킨다. 가령 $sceop.$broadcast("popup:open", {title: "hello"});르 ㄹ호출하면 $on 매서드를 이용해 해당 이멘트(popup:open)를 듣고 있는 $scope들에게 {title: "hello"}의 데이터를 전달할 수 있다. 잘 활용하면 $scope들 사이의 참조 관계를 매우 느슨하게 만들어 재 활용할 수 있는 UI컴포넌트 개발에 용이하다.

$destory()

현재 $scope를 제거할 수 있다. 모든 자식 $scope까지 파괴된다.

$digest()

$scope와 그 자식에 등록된 모든 $watch 리스너 함수를 실행시킨다. $watch리스너 함수가 보는 표현식에 대하여 변화가 없다면 리스너 함수는 실행시키지 않는다.

$emit(이벤트 명, 인자들...)

해당 $scope를 기준으로 상위 계층 $scope에게 이벤트 명으로 인자를 전달한다. 물론 $on으로 이벤트를 듣고 있는 상위 계층에 한하연 전파한다.

$eval(표현식, 로케인)

주어진 표현식을 계산하고 그 결과를 반환한다. 물론 현재 $scope를 기준으로 표현식이 계산된다. 예를 들어 $scope의 b라는 속성에 3이라는 값이 있으면 $scope.$eval('b+3'); 결과는 6이된다.

$evalAsync(현션식)

$eval과 마찬가지나, 표현식의 결과값이 바로 반환되지 않고 나중에 어떠한 시점에서 그 결과가 반환된다. 하지만 적어도 한번의 $digest가 호출된다.

$new(독립여부)

새로운 자식 $scope를 생성한다. 독립여부를 true, false로 전달하는ㄴ데 true일 경우 프로토타입을 기반으로 상속하지 않게 된다.

$on(이벤트 이름, 리스너 함수)

주어진 이벤트 이름으로 이벤트를 감지하다가 해당 이벤트가 발생하면 리스너 함수를 실행한다. 이벤트 리스너 함수는 첫 번째 인자로 인벤트 객체로 받고 다음으로 $emit이나 $broadcast에서 잔달한 값을 인자로 받는다.

$watch(표현식, 리스너 함수, 동등성 여부)

대상 $scope에 특정 표현식을 감지하는 리스너 함수를 등록한다. 가령 $scope의 data 속성에 특정 객체가 할당되어 있다고 하자. 그리고 $scope.$watch("data", function(){ ... }) 로 함수를 호출하면 $scope.data 의 레퍼런스가 변경될 때 리스너 함수가 호출된다. 리스너 함수에는 인자로 새로운 값과 이전값이 주어진다. 동등성 여부는 변경을 레퍼런스로 감지할 것인지 동등한 여부로 감지할 건인지 정할 때 사용된다. 기본값은 false이며 레퍼런스 변경 시에만 리스너 함수가 호출된다.

$watchCollection(표현식, 리스너 함수)

기본적으로 $watch와 같은 기능을 하며 대신 배열이나 객게에 대한 변경을 감지할 때 사용한다. 배열일 경우 새로운 배열 요소가 추가되거나 배열 요소들 사이의 순서가 변경되거나 배열 요소가 삭제될 때마다 리스너 함수가 호출된다. 객체일 경우 속성에 변경이 있을 때마다 리스너 함수가 호출된다.

사용시점별

데이터 바인딩 처리 시

$apply, $digest, $watch, $watchCollection

사용자 정의 이벤트처리 시

$broadcast, $emit, $on

표현식을 $scope 객체의 컨텍스트^context에서 계산할 때

$eval, $evalAsync

$scope의 생성과 파최 처리 시

$new, $destory