Touch directive for AngularJS that allows you to bind touchstart and touchend events.

flux-touch.directive.js

/**
 * @name fluxTouchDirective
 * @description
 * Simple directive for adding touchstart and touchend events to an element
 *
 * @author Todd Miller 
 * @version 1.0.0
 */

(function () {
    'use strict';

    angular
        .module('fluxTouchDirective', [])
        .directive('fluxTouchstart', fluxTouchstart)
        .directive('fluxTouchend', fluxTouchend);

    /**
     * @name fluxTouchstart
     * @methodOf fluxTouchDirective
     * @description
     * Bind a touchstart event and perform the action given in the attribute
     */
    function fluxTouchstart () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.on('touchstart', doTouchstart);

                /**
                 * @name doTouchstart
                 * @methodOf fluxTouchDirective.fluxTouchstart
                 * @description
                 * Execute the action given in the flux-touchstart attribute
                 * @param {object} event The event object
                 */
                function doTouchstart (event) {
                    event.preventDefault();

                    // pass along the event object so its accessible in the action
                    scope.$event = event;
                    scope.$apply(attrs.fluxTouchstart);
                }
            }
        };
    }

    /**
     * @name fluxTouchend
     * @methodOf fluxTouchDirective
     * @description
     * Bind a touchend event and perform that action given in the attribute
     */
    function fluxTouchend () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.on('touchend', doTouchend);

                /**
                 * @name doTouchend
                 * @methodOf fluxTouchDirective.fluxTouchend
                 * @description
                 * Execute the action given in the flux-touchend attribute
                 * @param {object} event The event object
                 */
                function doTouchend (event) {
                    event.preventDefault();

                    // pass along the event object so its accessible in the action
                    scope.$event = event;
                    scope.$apply(attrs.fluxTouchend);
                }
            }
        };
    }
})();