Basic Angular Directive

นอกจาก Angular Expression แล้ว เรายังสามารถใช้ Angular Directive สำหรับการผูกข้อมูล (binding) โดย directive ที่ใช้ทั่วไป มีดังนี้

ng-init

สำหรับการกำหนดค่าเริ่มต้นให้กับตัวแปร

1 2 3 4 5 6 7

<div ng-init="price=50;qty=25"> <p>Amount: {{ price * qty }}</p> <p>Amount: {{ price * qty | currency }}</p> <p>Amount: {{ price * qty | currency:'THB' }}</p> </div>

ตัวอย่างจะเป็นการกำหนดค่าตัวแปร price กับ qty

ng-model

เป็นการผูกค่าตัวแปรกับ input tag ใน HTML

1 2	<input type="text" ng-model="name"> <p>Name: {{ name }}</p>

ในตัวอย่างเป็นการผูก input text กับตัวแปรชื่อ name ซึ่งในการผูกค่า อาจจะใช้เป็นตัวแปรแบบ primitive หรือว่า object ก็ได้

หรืออีกตัวอย่างหนึ่ง เป็นการผูกค่าตัวแปร like กับ input radio

1 2 3 4 5

<div ng-init="like='Yes'"> <input type="radio" value="Yes" ng-model="like">I like <input type="radio" value="No" ng-model="like">I don't like <p>Answer: {{ like }}</p> </div>

หรือ ผูกค่ากับ select tag

1 2 3 4 5 6 7

<select ng-model="food"> <option value="Rice">Rice</option> <option value="Noodle">Noodle</option> <option value="Soup">Soup</option> </select> Your Order: {{ food }}

ng-click

เนื่องจากใน javascript ตัวแปรนอกจากจะเก็บค่าต่างๆ หรือว่าใช้เก็บเป็น object ของ property (ซึ่งก็เป็นการเก็บค่าอยู่ดี) ได้แล้ว ยังสามารถกำหนดให้ตัวแปรมีค่าเก็บ function ได้ด้วย เสมือนกับ function เป็นค่าๆ หนึ่ง ดังนั้นเราจึงใช้คุณสมบัตินี้มากำหนดพฤติกรรมของการทำงานในเอกสาร HTML ได้

ตัวอย่างกำหนดการคำนวณให้กับปุ่ม

1 2	<button ng-click="counter=counter+1">Count</button> <p>Counter: {{ counter }}</p>

ng-if

เป็น directive ที่ใช้กำหนดเงื่อนใขให้กับ HTML

ตัวอย่างกำหนดให้แสดงหรือไม่แสดงข้อความ (รวมถึงสีพื้น)

1 2 3 4 5 6

<div ng-init="show=true"> <p ng-if="show" style="background-color: red;">Red</p> <p ng-if="!show" style="background-color: green;">Green</p> <button ng-click="show=!show">Toggle</button> </div>

นอกจากนี้ยังมี

• ng-repeat
• ng-app
• ng-controller

พื้นฐานของ Angular Directive ก็จะมีประมาณนี้ เอาไว้ค่อยมาต่อกันนะค่ะ

Reference:
ng Directive