มารู้จัก scope และ rootScope ใน angularjs ตอนที่ 15

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

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



ถึงเราจะคุ้นเคยกับการใช้งาน scope ในหลายๆ ตัวอย่างที่ผ่านมาแล้ว
แต่อาจจะยังไม่เข้าใจละเอียดมากนัก เนื้อหาตอนนี้ เลยจะมาอธิบายเพิ่มเติม
ตามความเข้าใจของผู้เขียนบทความ
 
อ้างอิงจาก https://docs.angularjs.org/guide/scope
 
ใน angularjs จะสามารถเรียกใช้งาน scope ได้อยู่ 2 ส่วน คือ
1. ส่วนที่กำหนดจาก ngApp จะเป็น $rootScope
2. ส่วนกำหนด ใน controller โดยใช้ ngController จะเป็น $scope
 
โดย angularjs จะใช้วิธีกำหนด css class ชื่อว่า ng-scope 
ไว้ในทั้งสองส่วน เช่น
 
<!DOCTYPE html>
<html ng-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">
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
      </div>
      
</body>
</html>
 
หมายเหตุ: ใน html หรือ directive ที่กำหนดเอง จะใช้รูปแบบ  แบบ spinal-case 
เช่น ng-app หรือ ng-controller  คล้ายรุปแบบกระดูสันหลัง  |-|-|-|-|-|
ส่วนการอ้างอิง จะใช้วิธีเรียกแบบ camelCase หรือหลังอูฐ เช่น ngApp ngController
 
จากโค้ดด้านบน
ส่วน html แท็กเปิด จะมีการกำหนด css class เข้าไป
 
<html ng-app="" class="ng-scope">
 
เนื่องจากตัวอย่างด้านบน ไม่มีการกำหนด ในส่วนของ controller
ดังนั้นค่าตัวแปรต่างที่เรียกใช้ จะเป็นในส่วนของ $rootScope
 
ส่วนที่มีการกำหนด expression
 
<h1>Hello {{yourName}}!</h1>
 
แท็ก h1 จะถุกกำหนด css class ชื่อ ng-binding จะได้เป้น
 
<h1 class="ng-binding">Hello !</h1>
 
ngApp ไม่จำเป็นต้องกำหนดในส่วนแท็กเปิด html สามารถกำหนดในส่วนของแท็กเปิด body
 
<body ng-app>
 
หรืออื่นๆ ก็ได้ ในหนึ่งไฟล์สามารถมีได้หลายที่ แต่โดยทั่วไปแล้ว
จะกำหนด ที่เดียว และไว้ในส่วนของ แท้กเปิด html
 
หากมีการกำหนด controller จะต้องมีการเรียกใช้งาน angular.module และกำหนด
ค่าต่างๆ ให้กับ controller ไม่เช่นนั้น ส่วนของ controller ก็จะไม่ทำงาน
โดยจะต้องกำหนดชื่อในกับ ngApp เพื่อใช้ในการสร้าง module ด้วย 
 
เช่น
 
<!DOCTYPE html>
<!--กำหนดชื่อให้กับ ngApp-->
<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>
     
<!--     เมื่อมีการใช้งาน controller-->
     <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',function($scope){
    
}]);
</script>                
</body>
</html>
 
จากโค้ดตัวอย่างด้านบน จะมีการกำหนด controller ดังนั้น angularjs จะทำการกำหนด
css class ชื่อ ng-scope เข้าไปในส่วนของแท็ก div
 
<div class="container" ng-controller="myCtrl"> 
 
จะได้เป็น
 
<div class="container ng-scope" ng-controller="myCtrl"> 
 
เราสามารถเรียกใช้งาน $rootScope และ $scope โดยการ inject ค่าเข้าไปใน
controller จากโค้ดเป้นการใช้งาน $scope และมีการ inject ค่า $scope เข้าไป
ใน controller
 
<script type="text/javascript">
angular.module('app',[])
.controller('myCtrl',['$scope',function($scope){
    
}]);
</script>  
 
หากต้องการเรียกใช้งาน $rootScope สามารถทำได้ดังนี้
 
<script type="text/javascript">
angular.module('app',[])
.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
    
}]);
</script>  
 
$scope จะเป็น child หรือลูกของ $rootScope 
ถ้าเปรียบคือ
 
$rootScope เป็น parent
$scope เป็น child
 
และเนื่องจาก $rootScope ที่สามารถสืบทอดคุณสมบัติได้ หรือที่เรียกว่า Inheritance
ดังนั่ง property หรือ medthod ที่กำหนด จาก $rootScope ก็จะสามารถเรียกใช้งาน
ใน controller ได้
 
ดูโค้ดประกอบอธิบาย
 
<!DOCTYPE html>
<!--กำหนดชื่อให้กับ ngApp-->
<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>
     
<!--
     yourName อยู่นอก controller จะไม่สามารถใช้ค่าที่กำหนดจาก scope ใน controller ได้
     แต่ สามารถใช้ค่า ที่กำหนดจาก parent ของ $scope หรือ $rootScope
-->
     <p>Hi {{yourName}}</p>
<!--     เมื่อมีการใช้งาน controller-->
     <div class="container" ng-controller="myCtrl"> 
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
<!--      yourName ที่กำหนด ใน controller สามารถใช้ค่า ที่กำหนดจาก parent ของ scope หรือ $rootScope-->
      <h1>Hello {{yourName}}!</h1>
      </div>
      

<script type="text/javascript">
angular.module('app',[])
.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
    $rootScope.yourName="demo1";   
}]);
</script>                
</body>
</html>
 
จากโค้ดด้านบน จะเห็นว่า ค่า yourName ทั้งในและนอก controller จะมีค่าเท่ากับ demo1
นั้นก็เพราะ $scope สืบทอดค่ามาจาก $rootScope
 
ทีนี้มาดูกันว่า กลับกัน ค่าที่กำหนดด้วย child หรือ $scope จะไม่สามารถเรียกใช้ นอก controller ได้ 
ดูโค้ดประกอบ
 
<!DOCTYPE html>
<!--กำหนดชื่อให้กับ ngApp-->
<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>
     
<!--
     yourName อยู่นอก controller จะไม่สามารถใช้ค่าที่กำหนดจาก scope ใน controller ได้
     แต่ สามารถใช้ค่า ที่กำหนดจาก parent ของ scope หรือ rootScope
-->
     <p>Hi {{yourName}}</p>
<!--     เมื่อมีการใช้งาน controller-->
     <div class="container" ng-controller="myCtrl"> 
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
<!--      yourName ที่กำหนด ใน controller สามารถใช้ค่า ที่กำหนดจาก parent ของ scope หรือ $rootScope
     แต่หากมีการกำหนดค่า ของ $scope ใน controller ค่าที่ได้ จะใช้ค่าของ $scope แทนค่าจาก $rootScope
     -->
      <h1>Hello {{yourName}}!</h1>
      </div>
      

<script type="text/javascript">
angular.module('app',[])
.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
    $scope.yourName="demo2";   
}]);
</script>                
</body>
</html>
 
ใน controller มีการกำหนดค่า yourName ด้วย $scope ซึ่งเป็น child ของ $rootScope
ดังนั้นจะทำให้ yourName ที่อยู่นอก controller จะเป็น undefined 
ส่วน yourName ใน controller จะมีค่าเท่ากับ demo2
 
สรุปอย่างง่าย:  
1. ค่าที่กำหนดจาก $rootScope สามารถใช้งาน ใน controller ใดๆ ก็ได้
2. ถ้าใน controller มีการกำหนด $rootScope และ $scope โดยมีชื่อ หรือ property เดียวกัน เช่น 

$rootScope.yourname="demo1";
$scope.yourname="demo2";
 
แบบนี้ expression ใน controller จะใช้ค่าจาก $scope ซึ่งเท่ากับ demo2
ส่วน expression นอก controller จะใช้ค่าจาก $rootScope ซึ่งเท่ากับ demo1
 
3. ค่าที่กำหนดจาก $scope จะใช้ได้เฉพาะใน controller นั้นๆ เท่านั้น
 
ขอต่อรายละเอียดเกี่ยวกับ scope ในตอนหน้า รอติดตาม


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








เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



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




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











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