Skip to content

สร้าง Directive ใช้เองสำหรับ AngularJS

AngularJS อธิบายสั้นๆ ตามความเข้าใจของผมคือ Front-end Web Application Framework แบบ MVC ข้อดีที่ผมพบจากการใช้งานคือลดการเขียนส่วนที่ template การแสดงผล, การ binding DOM element ลงเยอะมาก การแสดงผลเขียนคล้าย template engine ทั่วไปโดยการแสดงผลจะเปลี่ยนตามค่าตัวแปร ($scope) ของ controller ที่คุม element นั้นๆ อยู่

AngularJS binding DOM element โดยใช้ directive แทรกเป็น attribute ใน HTML tag การทำงานง่ายๆ เช่น onclick, onchange, … การทำงานที่ซับซ้อนขึ้น directive ที่มีให้ไม่สามารถทำงานได้ตามต้องการแต่เราสามารถสร้าง directive ขึ้นมาเองเพื่อนใช้งานในแบบที่เราต้องการได้

การสร้าง directive ใช้ method ชื่อ directive() ซึ่งเป็น medthod ของ angular module ผมยกตัวอย่าง action ของ element ที่เห็นได้ทั่วไปใน web application เช่น การ scroll ลงไปล่างสุดของหน้าเว็บแล้วทำอะไรซักอย่างเช่นโหลดข้อมูลเก่ามาแสดงจะเขียน directive ได้เป็น

และ directive สำหรับการ submit input form ด้วยการกดปุ่ม enter

หรือจะเขียนต่อกันแบบนี้ก็ได้

เราสร้าง directive ชื่อ scrollToEnd และ keyEnterPress เป็นการตั้งชื่อแบบ camel case ก็จริงแต่เวลาเอาไปใช้ให้เรียกโดย lowercase คั่นด้วย “-” (dash) แทน เช่น

รูปแบบการใช้งานก็แล้วแต่เราจะ implement จะ implement แบบให้เรียก function ใดๆ หรือทำ function เฉพาะโดยไม่ต้องส่งชื่อ function ไปก็ได้

 

One Comment

Leave a Reply

Your email address will not be published.