Angular : Directives

Directives คือ สิ่งที่เราเพิ่มเข้าไปใน Tag ของ HTML ซึ่งจะไปสร้าง behavior ให้กับ DOM หรือ เปลี่ยนรูป DOM จะแบ่งออกเป็น 2 ประเภทใหญ่ๆ ได้แก่

1. Built-in Directive ซึ่งส่วนใหญ่ขึ้นต้นด้วย *ng ที่ Angular มีมาให้ก็จะมีมากมาย อาทิเช่น

  • ng-app : ฺบอกให้ Bootstrap เริ่มทำงาน Angular กับ element ไหน
  • ng-controller : จะใช้ controller จัดการกับ view ไหน
  • ng-model : binding ค่าเข้า view กับ model
  • ng-show/ ng-hide : เพื่อแสดง/ซ่อน element
  • ngFor : ใช้ในการวนลูป
  • ngIf : ใส่เงื่อนไขเช็คค่า

2. Custom Directive ที่เราสามารถกำหนดเอง จะแบ่งเป็น

  • HTML DOMS element – เราสามารถสร้าง element ใหม่ของเราขึ้นมาเองได้ เช่น <ma-directive></ma-directive>
  • attribute เราสามารถสร้าง attribute ให้กับ element เช่น <div ma-directive=”test”></div>
  • class name ตั้งชื่อคลาส เช่น <div class=”ma-directive: test;”></div>
  • comment เช่น <!–directive: ma-directive test –>

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.