AngularJS 범위
범위는 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
= "John Doe";
});
</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이 포함된 HTML 요소에서 생성된 범위인 which가 있습니다 .ng-app
rootScope는 전체 응용 프로그램에서 사용할 수 있습니다.
변수의 이름이 현재 범위와 rootScope 모두에서 동일한 경우 애플리케이션은 현재 범위에 있는 이름을 사용합니다.
예시
"color"라는 변수는 컨트롤러의 범위와 rootScope 모두에 존재합니다.
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is
still:</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>