ขอบเขต AngularJS
ขอบเขตเป็นส่วนที่มีผลผูกพันระหว่าง HTML (มุมมอง) และ JavaScript (ตัวควบคุม)
ขอบเขตเป็นวัตถุที่มีคุณสมบัติและวิธีการที่มีอยู่
ขอบเขตสามารถใช้ได้สำหรับทั้งมุมมองและตัวควบคุม
วิธีการใช้ขอบเขต?
เมื่อคุณสร้างคอนโทรลเลอร์ใน AngularJS คุณจะส่งผ่าน$scopeวัตถุเป็นอาร์กิวเมนต์:
ตัวอย่าง
คุณสมบัติที่สร้างขึ้นในคอนโทรลเลอร์ สามารถอ้างถึงในมุมมอง:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.carname
= "Volvo";
});
</script>
เมื่อเพิ่มคุณสมบัติให้กับ$scope
วัตถุในคอนโทรลเลอร์ มุมมอง (HTML) จะเข้าถึงคุณสมบัติเหล่านี้ได้
ในมุมมอง คุณไม่ได้ใช้คำนำหน้า$scopeคุณเพียงแค่อ้างถึงชื่อคุณสมบัติ{{carname}}เช่น
การทำความเข้าใจขอบเขต
หากเราพิจารณาว่าแอปพลิเคชัน AngularJS ประกอบด้วย:
- ดูซึ่งเป็น HTML
- โมเดล ซึ่งเป็นข้อมูลที่มีให้สำหรับมุมมองปัจจุบัน
- Controller ซึ่งเป็นฟังก์ชัน JavaScript ที่สร้าง/เปลี่ยนแปลง/ลบ/ควบคุมข้อมูล
จากนั้นขอบเขตคือแบบจำลอง
ขอบเขตเป็นอ็อบเจ็กต์ JavaScript ที่มีคุณสมบัติและเมธอด ซึ่งใช้ได้กับทั้งมุมมองและคอนโทรลเลอร์
ตัวอย่าง
หากคุณทำการเปลี่ยนแปลงในมุมมอง โมเดลและคอนโทรลเลอร์จะได้รับการอัปเดต:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script>
รู้ขอบเขตของคุณ
สิ่งสำคัญคือต้องรู้ว่าคุณกำลังจัดการกับขอบเขตใดเมื่อใดก็ได้
ในสองตัวอย่างข้างต้น มีเพียงขอบเขตเดียว ดังนั้นการรู้ว่าขอบเขตของคุณไม่ใช่ปัญหา แต่สำหรับแอปพลิเคชันขนาดใหญ่ อาจมีส่วนใน HTML DOM ซึ่งสามารถเข้าถึงได้เฉพาะบางขอบเขตเท่านั้น
ตัวอย่าง
เมื่อจัดการกับng-repeatคำสั่ง การทำซ้ำแต่ละครั้งจะสามารถเข้าถึงอ็อบเจ็กต์การทำซ้ำปัจจุบันได้:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.names
= ["Emil", "Tobias", "Linus"];
});
</script>
แต่ละ<li>อิลิเมนต์สามารถเข้าถึงอ็อบเจ็กต์การทำซ้ำปัจจุบัน ในกรณีนี้คือสตริง ซึ่งถูกอ้างถึงโดยxใช้
ขอบเขตราก
แอปพลิเคชันทั้งหมดมี a $rootScopeซึ่งเป็นขอบเขตที่สร้างบนองค์ประกอบ HTML ที่มีng-appคำสั่ง
rootScope มีอยู่ในแอปพลิเคชันทั้งหมด
หากตัวแปรมีชื่อเหมือนกันทั้งในขอบเขตปัจจุบันและใน rootScope แอปพลิเคชันจะใช้ชื่อที่อยู่ในขอบเขตปัจจุบัน
ตัวอย่าง
ตัวแปรชื่อ "color" มีอยู่ทั้งในขอบเขตของคอนโทรลเลอร์และใน rootScope:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is
still:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl',
function($scope) {
$scope.color = "red";
});
</script>
</body>