AngularJS Scope(의존성)

용도 영역은 컨트롤러와 뷰를 연결하는 특별한 JavaScript 객체입니다. 용도 영역은 모델 데이터를 포함합니다. 컨트롤러에서는 $scope 객체를 통해 모델 데이터에 접근합니다。

<script>
　　　var mainApp = angular.module("mainApp", []);
　　　
　　　mainApp.controller("shapeController", function($scope) {
　　　　　　$scope.message = "In shape controller";
　　　　　　$scope.type = "Shape";
　　　});
</script>

위 예제에서 다음 요점을 고려했습니다-

$scope는 컨트롤러에 첫 번째 매개변수로 전달됩니다.
$scope.message와 $scope.type는 HTML 페이지에서 사용하는 모델입니다。
우리는 shapeController를 컨트롤러로 reflect하는 모듈에 모델에 값을 할당합니다。
우리는 $scope에서 함수를 정의할 수 있습니다。

용도 영역 상속

scope(용도 영역)은 컨트롤러에 특정적입니다. 자식 컨트롤러를 정의하면 자식 컨트롤러가 부모 컨트롤러의 용도 영역을 상속합니다。

<script>
　　　var mainApp = angular.module("mainApp", []);
　　　
　　　mainApp.controller("shapeController", function($scope) {
　　　　　　$scope.message = "In shape controller";
　　　　　　$scope.type = "Shape";
　　　});
　　　mainApp.controller("circleController", function($scope) {
　　　　　　$scope.message = "In circle controller";
　　　});
</script>

위 예제에서 다음 요점을 고려했습니다-

우리는 shapeController에서 모델에 값을 할당합니다。
우리는 이름이circleController의자 컨트롤러에서 메시지를 덮어씁니다. 이름이circleController의 컨트롤러 모듈에서 사용됩니다message 때，대체 메시지를 사용합니다。

온라인 예제

아래 예제는 위의 모든 지시의 사용을 보여줍니다。

testAngularJS.htm

예제

<html>
　　　<head>
　　　　　　<title>Angular JS Forms</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS Scope(용도 영역)</h2>
　　　　　　
　　　　　　<div ng-app = "mainApp" ng-controller = "shapeController">
　　　　　　　　　<p>{{message}} <br/> {{type}} </p>
　　　　　　　　　
　　　　　　　　　<div ng-controller = "circleController">
　　　　　　　　　　　　<p>{{message}} <br/> {{type}} </p>
　　　　　　　　　</div>
　　　　　　　　　
　　　　　　　　　<div ng-controller = "squareController">
　　　　　　　　　　　　<p>{{message}} <br/> {{type}} </p>
　　　　　　　　　</div>
　　　　　　</div>
　　　　　　<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller("shapeController", function($scope) {
　　　　　　　　　　　　$scope.message = "형상 컨트롤러";
　　　　　　　　　　　　$scope.type = "Shape";
　　　　　　　　　});
　　　　　　　　　mainApp.controller("circleController", function($scope) {
　　　　　　　　　　　　$scope.message = "원형 컨트롤러";
　　　　　　　　　});
　　　　　　　　　mainApp.controller("squareController", function($scope) {
　　　　　　　　　　　　$scope.message = "사각형 컨트롤러";
　　　　　　　　　　　　$scope.type = "Square";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

테스트를 보세요‹/›

출력 결과

네트워크 브라우저에서 파일을 엽니다.testAngularJS.htm결과를 확인하세요。

AngularJS 서비스(Service) AngularJS 뷰

AngularJS 기본 강의

AngularJS Scope(의존성)

용도 영역 상속

온라인 예제

testAngularJS.htm