การใช้ Scopes ใน AngularJS

    หลังจากกล่าวถึง AngularJS มาหลายบทความและใช้ $scope มานาน ยังไม่ได้กล่าวถึงเลยว่าเจ้าตัว $scope มีอะไรให้เราเรียกใช้บ้าง หลักการทำงานเป็นอย่างไร ในบทความนี้เราจะมาเจาะเจ้าตัว scope โดยเฉพาะเลยครับ งั้นมาเริ่มกันเลย
    ตัว scope นั้นเป็น javascript object พิเศษที่ทำหน้าทีในการเชื่อม controller กับ views. ตัว Scope จะเก็บข้อมูล model ของ controllers และเข้าถึงข้อมูลเหล่านั้นผ่าน $scope object.

จุดที่ต้องพิจารณาจากตัวอย่างข้างบนคือ.

• $scope ถูกส่งเข้ามาเป็นพารามิเตอร์ตัวแรกให้กับ controller ในระหว่างที่อ๊อปเจคของฟังก์ชั่นถูกสร้างขึ้น.
• $scope.message และ $scope.type เป็น models ที่ใช้ใน HTML ซึ่งทั้งสองตัวนี้จะมีอยู่เสมอแม้ว่าเราประกาศหรือไม่ก็ตาม.
• เมื่อเราเปลี่ยนแปลงค่า models ใดๆมันจะย้อนส่งข้อมูลที่เปลี่ยนแปลงแล้วกลับยัง application module ที่ Controller นั้นๆอยู่เสมอ ในตัวอย่างคือ shapeController.
• เราสามารถประกาศฟังก์ชั่นใน $scope ได้.

การสืบทอด Scope : Scope นั้นขึ้นกับ Controller หากว่าเราสร้าง Controller หลายๆตัวใน Module เดียวกัน หาก controller ลูกไม่มีการ override model แล้ว Controller ลูกก็จะได้ค่าของ Controller แม่ไปด้วย

จุดที่ต้องพิจารณาจากตัวอย่างข้างบนคือ.

• เราได้ทำการเชตค่า model ต่างให้ใน shapeController.
• เราได้ทำการ override model ที่ชื่อ message ใน controller ที่ชื่อ circleController. เมื่อตัว "message" ถูกใช้ช้ำใน controller ของ circleController ดังนั้นแล้วค่าของ message ก็จะถูกแก้ในส่วนของ circleController ไปด้วย.

ตัวอย่าง

    


    
AngularJS Sample Application
    

        {{message}} {{type}}
        

            {{message}} {{type}}
        
        

            {{message}} {{type}}
        
    
    
    

ผลลัพธ์

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.