ภาคต่อ วัฏจักรของ scope และลำดับการทำงาน ใน angularjs ตอนที่ 16

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
scope angularjs

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ scope angularjs

ดูแล้ว 7,521 ครั้ง


มาดู วัฏจักรของ 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 เนื้อหาอาจดูสับสนไปบ้าง
เนื่องจาก มีการอ้างอิง ส่วนอื่นๆ ประกอบกับการการอธิบายของผู้เขียนบทความ อาจนำ
เสนอไม่ถูกต้องครบถ้วน 
 
...รอติดตามเนื้อหาหน้าในตอนต่อได้ ....


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: scope angularjs







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ