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

11 September 2014 เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee

rootscope angularjs scope

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

ถึงเราจะคุ้นเคยกับการใช้งาน 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 สำหรับอ้างอิง

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน