AngularJS - Phạm vi

Phạm vi là một đối tượng JavaScript đặc biệt kết nối bộ điều khiển với các khung nhìn. Phạm vi chứa dữ liệu mô hình. Trong bộ điều khiển, dữ liệu mô hình được truy cập thông qua đối tượng $ scope.

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

Các điểm quan trọng sau đây được xem xét trong ví dụ trên:

Phạm vi $ được chuyển làm đối số đầu tiên cho bộ điều khiển trong quá trình định nghĩa hàm tạo của nó.
$ Scope.message và $ scope.type là các mô hình được sử dụng trong trang HTML.
Chúng tôi gán giá trị cho các mô hình được phản ánh trong mô-đun ứng dụng, có bộ điều khiển là shapeController.
Chúng ta có thể xác định các hàm trong phạm vi $.

Kế thừa phạm vi

Phạm vi dành riêng cho bộ điều khiển. Nếu chúng ta định nghĩa bộ điều khiển lồng nhau, thì bộ điều khiển con kế thừa phạm vi của bộ điều khiển mẹ của nó.

<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>

Các điểm quan trọng sau đây được xem xét trong ví dụ trên:

Chúng tôi gán giá trị cho các mô hình trong shapeController.
Chúng tôi ghi đè thông báo trong bộ điều khiển con có tên circleController . Khi thông báo được sử dụng trong mô-đun của bộ điều khiển có tên circleController , thông báo ghi đè sẽ được sử dụng.

Thí dụ

Ví dụ sau cho thấy việc sử dụng tất cả các lệnh được đề cập ở trên.

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>

Đầu ra

Mở tệp testAngularJS.htm trong trình duyệt web và xem kết quả.