집 >웹 프론트엔드 >JS 튜토리얼 >AngularJS_AngularJS의 범위에 대한 자세한 설명

AngularJS_AngularJS의 범위에 대한 자세한 설명

WBOY원래의: 2016-05-16 15:54:321235검색

범위는 뷰가 연결되는 컨트롤러 역할을 하는 특수 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의 "message" 모듈이 사용될 때 사용됩니다.

예

다음 예에서는 위의 모든 명령을 보여줍니다.
testAngularJS.html

<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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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>

결과

웹 브라우저에서 textAngularJS.html을 엽니다. 아래 결과를 참조하세요.

2015617110218233.jpg (560×429)

성명：

이전 기사：JavaScript_기본 지식에서 예외 처리 방법을 자세히 설명합니다.다음 기사：JavaScript_기본 지식에서 예외 처리 방법을 자세히 설명합니다.

AngularJS_AngularJS의 범위에 대한 자세한 설명

관련 기사