× Giới thiệu Lịch khai giảng Tin tức Sản phẩm học viên

$Scope trong AngularJS là gì? Hướng dẫn với Chức năng

31/05/2023 01:20

$scope trong AngularJS là một đối tượng tích hợp, về cơ bản liên kết “bộ điều khiển” và “khung nhìn”. Người ta có thể xác định các biến thành viên trong phạm vi trong bộ điều khiển mà sau đó chế độ xem có thể được truy cập.

Phạm vi $ trong AngularJS là gì?

$scope trong AngularJS là một đối tượng tích hợp, về cơ bản liên kết “bộ điều khiển” và “khung nhìn”. Người ta có thể xác định các biến thành viên trong phạm vi trong bộ điều khiển mà sau đó chế độ xem có thể được truy cập.

Xem xét ví dụ dưới đây:

angular.module('app',[]).controller('HelloWorldCtrl'
	chức năng ($ phạm vi)
	{
		$scope.message = "Xin chào thế giới"
	});

Giải thích mã:

  1. Tên của mô-đun là “ứng dụng”
  2. Tên của bộ điều khiển là “HelloWorldCntrl”
  3. Đối tượng phạm vi là đối tượng chính được sử dụng để truyền thông tin từ bộ điều khiển sang dạng xem.
  4. Biến thành viên được thêm vào đối tượng phạm vi

Thiết lập hoặc thêm Hành vi

Để phản ứng với các sự kiện hoặc thực hiện một số loại tính toán/xử lý trong Chế độ xem, chúng tôi phải cung cấp hành vi cho phạm vi.

Các hành vi được thêm vào các đối tượng phạm vi để phản hồi các sự kiện cụ thể có thể được kích hoạt bởi Chế độ xem. Khi hành vi được xác định trong bộ điều khiển, nó có thể được truy cập bởi chế độ xem.

Hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.

<!DOCTYPE html>  
<html lang="vi">  
<đầu>  
    <meta chrset="UTF 8">
    <title>Guru99</title>     
</head>  
<body ng-app="DemoApp">
<h1> Sự kiện toàn cầu Guru99</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-controller="DemoController">
	{{fullName("Guru","99")}}
</div>
<kiểu tập lệnh="văn bản/javascript">  
	var app = angular.module("DemoApp", []);
	app.controller("DemoController", function($scope) {
    
    $scope.fullName=function(firstName,lastname){
		trả lại tên + họ;
		}
	} );
</script>

</body>  
</html>

Giải thích mã:

  1. Chúng tôi đang tạo một hành vi có tên là “fullName”. Hành vi này là một hàm chấp nhận 2 tham số (tên, họ).
  2. Sau đó, hành vi trả về kết hợp của 2 tham số này.
  3. Trong chế độ xem, chúng tôi đang gọi hành vi và chuyển vào 2 giá trị “Guru” và “99” được chuyển dưới dạng tham số cho hành vi.

Nếu lệnh được thực thi thành công, Đầu ra sau sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:

Trong trình duyệt, bạn sẽ thấy sự kết hợp của cả hai giá trị Guru & 99 được truyền cho hành vi trong bộ điều khiển.

Bản tóm tắt

  • Các biến thành viên khác nhau có thể được thêm vào đối tượng phạm vi mà sau đó có thể được tham chiếu trong dạng xem.
  • Hành vi có thể được thêm vào để hoạt động với các sự kiện được tạo cho các hành động do người dùng thực hiện.
  • AngularJS  $rootScope phạm vi cho toàn bộ ứng dụng. Một ứng dụng chỉ có thể có một $rootScope và được sử dụng như một biến toàn cục. Trong Angular JS $scopes là phạm vi con và $rootScope là phạm vi cha