$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 เป็นขอบเขตหลัก
