AngularJS 스코프

스코프(scope)는 HTML(뷰)와 JavaScript(제어자) 간의 바인딩 부분입니다.

스코프는 사용 가능한 속성과 메서드를 가진 객체입니다.

스코프는 뷰와 제어자 모두에 사용 가능합니다.

스코프를 어떻게 사용하나요?

AngularJS에서 제어자를 생성할 때, 당신은 $scope 객체를 매개변수로 전달합니다：

예제

제어자에서 생성된 속성은 뷰에서 참조할 수 있습니다：

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.carname = "Volvo";
});
</script>

직접 시도해보세요

컨트롤러에서 추가할 때}} $scope 객체에 속성을 추가할 때, 뷰(HTML)는 이러한 속성에 접근할 수 있습니다。

뷰에서는 $scope 접두사, 단순히 속성 이름을 참조하면 됩니다. 예를 들어, {{carname}}。

스코프 이해

AngularJS 애플리케이션을 다음과 같은 몇 가지 부분으로 구성된 것으로 보면:

  • 뷰는 HTML입니다。
  • 모델은 현재 뷰에서 사용할 수 있는 데이터입니다。
  • 컨트롤러는 데이터를 생성/변경/삭제/제어하는 JavaScript 함수입니다。

그렇다면 스코프는 모델입니다。

스코프는 속성과 메서드를 가진 JavaScript 객체로, 이 속성과 메서드는 뷰와 컨트롤러 모두에 사용 가능합니다。

예제

뷰에서 변경을 진행하면, 모델과 컨트롤러가 업데이트됩니다：

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

직접 시도해보세요

스코프를 이해하다

언제든지 처리하는 스코프를 이해하는 것은 중요합니다。

위 두 예제에서는 하나의 스코프만 있습니다. 따라서 스코프를 이해하는 것은 문제가 아니지만, 더 큰 애플리케이션에서는 HTML DOM의 일부는 특정 스코프에만 접근할 수 있습니다。

예제

ng-repeat 지시를 처리할 때마다, 각 반복은 현재 반복 객체에 접근할 수 있습니다：

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
  <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

직접 시도해보세요

각 <li> 요소는 현재 반복 객체에 접근할 수 있습니다. 이 예제에서는 문자열입니다. x 를 참조합니다.

루트 스코프

모든 애플리케이션은 $rootScope، 그것은 ng-app HTML 요소에 생성된 스코프.

rootScope는 전체 애플리케이션에서 사용 가능합니다。

현재 스코프와 루트 스코프(rootScope)에同名의 변수가 있으면, 애플리케이션은 현재 스코프의 변수를 사용합니다。

예제

컨트롤러의 스코프와 rootScope에 "color"이라는 이름의 변수가 있습니다：

<body ng-app="myApp">
<p>rootScope의 favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>컨트롤러의 스코프의 좋아하는 색상:</p>
  <h1>{{color}}</h1>
</div>
<p>rootScope의 좋아하는 색상은 여전히:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
  $rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
  $scope.color = "red";
});
</script>
</body>

직접 시도해보세요