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

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

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

ดูแล้ว 10,776 ครั้ง


ถึงเราจะคุ้นเคยกับการใช้งาน 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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





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

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


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


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







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