AngularJS 범위(scope)
Scope는 HTML(보기)과 JavaScript(컨트롤러) 사이의 링크입니다.
Scope는 사용 가능한 메서드와 속성이 있는 개체입니다.
Scope는 뷰와 컨트롤러에 적용될 수 있습니다.
Scope 사용 방법
AngularJS에서 컨트롤러를 생성할 때 $scope 객체를 매개변수로 전달할 수 있습니다:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<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>
<p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>
</body>
</html>인스턴스 실행»
"인스턴스 실행"을 클릭하세요. "온라인 인스턴스를 보기 위한 버튼
컨트롤러에 $scope 개체를 추가하면 보기(HTML)에서 이러한 속성을 얻을 수 있습니다.
뷰에서는 $scope 접두사를 추가할 필요가 없으며 {{carname}}과 같은 속성 이름만 추가하면 됩니다.
Scope 개요
AngularJS 애플리케이션은 다음으로 구성됩니다.
View(보기), 즉 HTML입니다.
Model(모델), 현재 보기에서 사용할 수 있는 데이터입니다.
JavaScript 함수인 Controller(컨트롤러)는 속성을 추가하거나 수정할 수 있습니다.
스코프가 모델입니다.
스코프는 뷰와 컨트롤러에서 사용할 수 있는 속성과 메서드가 포함된 JavaScript 개체입니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>我的名字是 {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
<p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
범위 범위
현재 사용하고 있는 범위를 이해하는 것이 매우 중요합니다.
위의 두 예에서는 범위가 하나뿐이므로 비교적 다루기가 간단합니다. 그러나 대규모 프로젝트의 경우 HTML DOM에 여러 범위가 있으므로 해당 범위를 알아야 합니다. 당신이 사용하는 범위는 무엇입니까?
각 <li> 요소는 문자열에 해당하고 변수 x로 표시되는 현재 반복 개체에 액세스할 수 있습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<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>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
루트 범위
모든 애플리케이션에는 $rootScope이 있으며, 이는 에서 사용할 수 있습니다. 모든 HTML 요소에 ng -app 지시어가 포함되어 있습니다.
$rootScope은 전체 애플리케이션에 적용할 수 있습니다. 이는 각 컨트롤러의 범위 사이를 연결하는 브리지입니다. rootscope로 정의된 값은 각 컨트롤러에서 사용할 수 있습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>姓氏为 {{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
<p>注意 $rootScope 在循环对象内外都可以访问。</p>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
