Scope?
AngularJS에서 Scope란 특정 모듈의 컨트롤러의 유효범위 안에서 사용할 수 있는 저장공간,
즉 AngularJS에서의 변수이다.
AngularJS에서 scope는 계층적인 구조를 가지고 있다.
<html ng-app> -->최상위 root scope
<head>
</head>
<body ng-controller="controller1"> --> controller1 내부에 할당된 scope
<div ng-controller="controller2"> --> controller2 내부에 할당된 scope
</div>
</body>
</html
이처럼 웹 페이지 로드 후 ng-app이 정의된 DOM에 root scope가 할당되고
그 후 내부에 있는 컨트롤러의 scope들이 계층적으로 생성이된다.
scope가 계층적 구조이지만 자식 scope에서 부모 scope에 접근이 가능하다.
즉 찾고있는 scope 내부에 해당 모델이나 함수가 없으면 상위 scope에서 찾는 구조이다.
└이 구조를 이용하여 상위의 scope에는 공통으로 사용할 것을 정의하고 하위 scope에는 특화된 것들을 정의해서 사용할 수 있다.
위 예제 처럼 ctrl1 하위의 ctrl2의 스코프는 부모 스코프의 name을 재정의 하였고 자식 스코프에서 age를 가져올 땐
자신의 스코프엔 값이 없으니 부모 스코프의 정의된 age를 가져오는 것을 볼 수 있다.
결과 화면
Isolate scope
스코프의 계층 구조는 유용하지만
특정 스코프 내에 있는 값을 가져오려고 할땐 문제가 될 수 있다.
이때 Isolate scope를 이용하면 자신의 scope 내에서만 모델과 핸들러를 찾을 수 있다.
isolate scope를 이용하면 자신만의 독립적인 사용자정의 디렉티브를 만드는데 활용할 수 있음.
'AngularJS' 카테고리의 다른 글
| [AngularJS] 5. Factory를 이용한 동적 웹 페이지 구현 예제 (0) | 2021.11.21 |
|---|---|
| [AngularJS] 4. Router을 이용한 SPA 구현 예제 (0) | 2021.11.20 |
| [AngularJS] AngularJS를 이용한 코딩 예제 (2) (0) | 2021.11.09 |
| [AngularJS] 2. AngularJS의 모듈 (0) | 2021.11.02 |
| [AngularJS] 1. AngularJS를 이용한 코딩 예제 (0) | 2021.10.26 |