범위는 HTML (보기)와 자바 스크립트 (컨트롤러) 사이의 결합 부분입니다.
범위는 사용 가능한 프로퍼티와 메소드를 가진 객체입니다.
범위는 뷰와 컨트롤러를 모두 사용할 수 있습니다.
어떻게 범위를 사용하는 방법?
당신이 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 , 당신은 단지 propertyName 형식을 참조, 같은 {{carname}} .
범위 이해
우리는 구성 할 수있는 AngularJS와 응용 프로그램을 고려하는 경우 :
- 되는 HTML 인 봅니다.
- 현재보기에 사용할 수있는 데이터입니다 모델.
- 변경 / 만드는 자바 스크립트 함수 컨트롤러, / / 데이터를 제어 제거합니다.
그런 다음 범위는 모델이다.
범위는 뷰와 컨트롤러 모두에 사용할 수있는 속성과 메서드와 자바 스크립트 객체입니다.
예
당신이보기에서 변경 한 경우, 모델과 컨트롤러는 업데이트됩니다
<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 요소에 생성 범위 인 ng-app 지시문을.
rootScope은 전체 응용 프로그램에서 사용할 수 있습니다.
변수가 모두 현재 범위에 rootScope과 동일한 이름을 갖는 경우, 프로그램은 현재 범위에서 하나를 사용한다.
예
"컬러"라는 이름의 변수는 컨트롤러의 두 범위와 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> »그것을 자신을 시도