Skip to content

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

Last updated on April 9, 2016

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 ได้เป็น

angular.module('SampleApp', [])
.config(function() {
    ....
})
.directive('scrolledToEnd', function ($timeout) {
    return function (scope, elm, attr) {
        var raw = elm[0];

        elm.bind('scroll', function () {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                $timeout(function () {
                    scope.$apply(attr.scrolledToEnd)
                }, 500);
            }
        });
    };
})

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

angular.module('SampleApp', [])
.config(function() {
    ....
})
.directive('keyEnterPress', function () {
    var ENTER_KEYCODE = 13;
    return function (scope, elm, attr) {
        var raw = elm[0];

        elm.bind('keypress', function (e) {
            if (e.keyCode != ENTER_KEYCODE && e.which != ENTER_KEYCODE)
                return;
            scope.$apply(attr.keyEnterPress)
        });
    };
})

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

angular.module('SampleApp', [])
    .config(function () {
            ....
    })
    .directive('directive1', function () {
            ....
    })
    .directive('directive2', function () {
            ....
    });

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

<div scrolled-to-end="DoSomething()"></div>
<div key-enter-press="DoSomething()"></div>

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

 

One Comment

Leave a Reply

Your email address will not be published.

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