มาดู วัฏจักรของ scope (Scope Life Cycle)
1. สร้าง scope
โปรแกรมจะเริ่มต้นสร้าง rootScope จากการเรียกใช้งาน ng-app
และจะทำการสร้าง child scope จาก directive บางตัว เช่น ng-controller และ ng-repeat
<html ng-app="app"> <body ng-controller="myCtrl"> </body> </html>
2. ลงทะเบียน Watcher
scope จะทำการลงทะเบียน Watcher เพื่อไว้สำหรับใช้งานการกระจายค่า model ไปยัง DOM
angular.module('app',[])
.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
}])
3. เปลี่ยนแปลงค่า model
$scope.yourName="demo2"; // yourName คือ model หรือ property ของ scope
4. สังเกตการเปลี่ยนแปลง
โดยสามารถใช้ method $watch ตรวจสอบการเปลี่ยนแปลงค่า scope model ได้
$scope.yourName="demo2"; // yourName คือ model หรือ property ของ scope
// ตรวจจับการเปลี่ยนเปลียนแปลงของค่า moedel และทำงาน
$scope.$watch('yourName',function(oldValue,newValue){
console.log(oldValue);
console.log(newValue);
});
5. ยกเลิก scope
เมื่อ child scope ไม่ถูกใช้งานหรือไม่ได้เรียกใช้แล้ว การยกเลิก child scope จะช่วยให้ memory ที่ถูกใช้ผ่าน child scope model กลับคืนมา
// ยกเลิก child scope $scope.$destroy();
scopes และ directives
ในขั้นตอนการรวบรวม จะมีการ complie directive ควบคู่ไปกับ template
เป็นไปในสองลักษณะคือ
- สำหรับการแสดงข้อมูล โดยใช้รูปแบบ {{expression}} สำหรับแสดงค่าของ scope
เช่น
<div>{{yourName}}</div>
- สำหรับรับค่าฟังก์ชั่นหรือ method ของ scope
<button type="button" ng-click="doIt()" >CLICK</button>
Directives ที่สร้าง scope
จากที่อธิบายมาแล้วบางส่วนด้านบน directives ที่มีการสร้าง scope จะมี
ng-app สร้าง rootScope
ng-controller และ ng-repeat สร้าง child scope หรือ เรียก scope เฉยๆ ก็ได้
controllers และ scopes
- controller จะใช้ scope เพื่อกำหนด method ให้ทำงานกับหน้า view template
ตัวอย่าง
angular.module('app',[])
.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
$scope.doSomething=function(){ // doSomething คือ method
// do something
};
}])
- controller ใช้กำหนดค่า model หรือ property ของ scope
ตัวอย่าง
angular.module('app',[])
.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
$scope.yourName="demo2"; // yourName คือ model หรือ property ของ scope
}])
- controller อาจเรียกใช้ $watch เพื่อตรวจจับการเปลี่ยนแปลงของ ค่า model
ตัวอย่าง
angular.module('app',[])
.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
$scope.yourName="demo2";
// ตรวจจับการเปลี่ยนเปลียนแปลงของค่า model และทำงาน
$scope.$watch('yourName',function(oldValue,newValue){
console.log(oldValue);
console.log(newValue);
});
}])
โค้ดตัวอย่าง Hello world
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container" ng-controller="myCtrl">
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
<script type="text/javascript">
angular.module('app',[])
.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
}]);
</script>
</body>
</html>
ตัวอย่าง
มาดูลำดับการทำงานของ scope ในตัวอย่างโค้ด hello wold ด้านบน
เมื่อเรากรอกข้อมูลจะเกิดอะไรขึ้น
1. ขั้นตอนของการรวบรวม
1. ng-model และ input directive กำหนดการรอรับคำสั่งสั่งผ่าน keydown ให้กับแท็ก input
2. interpolation (service ตัวแปลง string ที่มีแท็ก html และ expression มาไว้ใน ฟังก์ชั่น เพื่อ lnk กับ scope) กำหนด method $watch เพื่อตรวจจับการเปลี่ยนแปลงค่าของ model ชื่อ yourName
2. ขั้นตอนที่โปรแกรมทำงาน
1. เมื่อเรากดปุ่ม "x" บราวเซอร์ จะเรียก keydown event มายัง input text
2. input text จับการเปลี่ยนแปลงค่า และเรียกใช้ $apply("yourName='x';"); เพื่ออัพเดทค่า model ในส่วนทำงานของ angular
3 angular กำหนดค่า yourName = 'X'; . ให้กับ model หรือก็คือ $scope.yourName="x";
4. $digest loop เริ่มทำงาน เช่น หากกดตัวอักษรอื่นเพิ่มเติม
5. $watch ตรวจจับการเปลี่ยนแปลงของค่า model แล้วทำการอัพเดทค่าไปยัง DOM
6. angular หยุดทำงานเมื่อสิ้นสุด event keydown
7. บราวเซอร์ renders หน้า view ใหม่ พร้อมอัพเดท ข้อความที่แสดง
ทั้งหมดนี้เป็นความเข้าใจเกี่ยวกับการใช้งาน scope ขอบเขตการทำงานของ scope
การใช้งานร่วมกับส่วนอื่นๆ เช่น directives และ controllers เนื้อหาอาจดูสับสนไปบ้าง
เนื่องจาก มีการอ้างอิง ส่วนอื่นๆ ประกอบกับการการอธิบายของผู้เขียนบทความ อาจนำ
เสนอไม่ถูกต้องครบถ้วน
...รอติดตามเนื้อหาหน้าในตอนต่อได้ ....
