$Scope ใน AngularJS คืออะไร บทช่วยสอนพร้อมฟังก์ชัน (ตัวอย่าง)

$scope ใน AngularJS คืออะไร?

$ขอบเขตใน AngularJS เป็นวัตถุในตัวซึ่งโดยทั่วไปจะผูก "ตัวควบคุม" และ "มุมมอง" เราสามารถกำหนดตัวแปรสมาชิกในขอบเขตภายในตัวควบคุมซึ่งสามารถเข้าถึงได้โดยมุมมอง

พิจารณาตัวอย่างด้านล่าง:

angular.module('app',[]).controller('HelloWorldCtrl'
	function($scope)
	{
		$scope.message = "Hello World"
	});

คำอธิบายรหัส:

ชื่อของโมดูลคือ "แอป"
ชื่อของคอนโทรลเลอร์คือ “HelloWorldCntrl”
วัตถุขอบเขตเป็นวัตถุหลักที่ใช้ในการส่งข้อมูลจากตัวควบคุมไปยังมุมมอง
เพิ่มตัวแปรสมาชิกให้กับวัตถุขอบเขต

การตั้งค่าหรือเพิ่มพฤติกรรม

เพื่อที่จะตอบสนองต่อเหตุการณ์หรือดำเนินการคำนวณ/ประมวลผลบางประเภทในมุมมอง เราต้องจัดให้มีพฤติกรรมในขอบเขต

พฤติกรรมจะถูกเพิ่มให้กับวัตถุขอบเขตเพื่อตอบสนองต่อเหตุการณ์เฉพาะที่อาจถูกกระตุ้นโดยมุมมอง เมื่อกำหนดพฤติกรรมในคอนโทรลเลอร์แล้ว มุมมองจะสามารถเข้าถึงได้

ลองดูตัวอย่างว่าเราจะบรรลุเป้าหมายนี้ได้อย่างไร

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta chrset="UTF 8">
    <title>Guru99</title>     
</head>  
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-controller="DemoController">
	{{fullName("Guru","99")}}
</div>
<script type="text/javascript">  
	var app = angular.module("DemoApp", []);
	app.controller("DemoController", function($scope) {
    
    $scope.fullName=function(firstName,lastname){
		return firstName + lastname;
		}
	} );
</script> 

</body>  
</html>

คำอธิบายรหัส:

เรากำลังสร้างพฤติกรรมที่เรียกว่า "ชื่อเต็ม" ลักษณะการทำงานนี้เป็นฟังก์ชันที่ยอมรับ 2 พารามิเตอร์ (ชื่อ, นามสกุล)
ลักษณะการทำงานจะส่งกลับการต่อกันของพารามิเตอร์ 2 ตัวนี้
ในมุมมอง เรากำลังเรียกพฤติกรรมและส่งผ่านค่า "Guru" และ "2" 99 ค่า ซึ่งจะถูกส่งผ่านเป็นพารามิเตอร์ไปยังพฤติกรรม

หากดำเนินการคำสั่งสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

ในเบราว์เซอร์ คุณจะเห็นการต่อกันของทั้งค่าของ Guru และ 99 ซึ่งส่งผ่านไปยังลักษณะการทำงานใน ตัวควบคุม.

สรุป

คุณสามารถเพิ่มตัวแปรสมาชิกต่างๆ ให้กับออบเจ็กต์ขอบเขตซึ่งสามารถอ้างอิงในมุมมองได้
คุณสามารถเพิ่มลักษณะการทำงานเพื่อทำงานกับเหตุการณ์ที่สร้างขึ้นสำหรับการกระทำที่ดำเนินการโดยผู้ใช้
เค้ก AngularJS $rootScope คือขอบเขตของแอปพลิเคชันทั้งหมด แอปพลิเคชันสามารถมี $rootScope ได้เพียงอันเดียวเท่านั้น และถูกใช้เหมือนกับตัวแปรโกลบอล ใน Angular JS $scopes คือขอบเขตย่อยและ $rootScope เป็นขอบเขตหลัก