ขอบเขตเป็นส่วนที่มีผลผูกพันระหว่าง HTML (มุมมอง) และ JavaScript (Controller)
ขอบเขตเป็นวัตถุที่มีคุณสมบัติที่มีอยู่และวิธีการ
ขอบเขตสามารถใช้ได้ทั้งมุมมองและการควบคุม
วิธีการใช้ขอบเขตหรือไม่
เมื่อคุณทำการควบคุมใน 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 คุณเพียงแค่อ้างถึง PROPERTYNAME เช่น {{carname}}
ทำความเข้าใจเกี่ยวกับขอบเขต
ถ้าเราพิจารณาการประยุกต์ใช้ AngularJS ประกอบด้วย:
- ดูซึ่งเป็น HTML
- รุ่นซึ่งเป็นข้อมูลที่มีอยู่สำหรับมุมมองปัจจุบัน
- ควบคุมซึ่งเป็นฟังก์ชัน 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> ลองตัวเอง» รู้ขอบเขตของคุณ
มันเป็นสิ่งสำคัญที่จะทราบว่าขอบเขตคุณจะจัดการกับในเวลาใด ๆ
ในช่วงสองตัวอย่างข้างต้นมีเพียงหนึ่งขอบเขตเพื่อให้รู้ขอบเขตของคุณไม่เป็นปัญหา แต่สำหรับการใช้งานที่มีขนาดใหญ่จะมีส่วนใน DOM HTML ซึ่งสามารถเข้าถึงขอบเขตบางอย่าง
ตัวอย่าง
เมื่อจัดการกับ 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
ขอบเขตราก
โปรแกรมทั้งหมดมี $rootScope ซึ่งเป็นขอบเขตที่สร้างขึ้นบนองค์ประกอบ HTML ที่ประกอบด้วย ng-app สั่ง
rootScope มีอยู่ในโปรแกรมทั้งหมด
ถ้าตัวแปรมีชื่อเดียวกันทั้งในปัจจุบันและขอบเขตใน rootScope การประยุกต์ใช้อย่างใดอย่างหนึ่งในขอบเขตปัจจุบัน
ตัวอย่าง
ตัวแปรชื่อ "สี" ที่มีอยู่ในขอบเขตทั้งควบคุมและใน 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> ลองตัวเอง»