AngularJS-범위

범위는 컨트롤러를 뷰와 연결하는 특수 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 인 애플리케이션 모듈에 반영된 모델에 값을 할당합니다.
$ 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 라는 컨트롤러의 모듈 내에서 메시지를 사용하는 경우 재정의 된 메시지가 사용됩니다.

예

다음 예제는 위에서 언급 한 모든 지시문의 사용을 보여줍니다.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Forms</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</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://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
      <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";
         });
         mainApp.controller("squareController", function($scope) {
            $scope.message = "In square controller";
            $scope.type = "Square";
         });
			
      </script>
      
   </body>
</html>

산출

웹 브라우저에서 testAngularJS.htm 파일을 열고 결과를 확인합니다.