タッチイベントのディレクティブ

2016-01-29
#angular

AngularJSにマウスのイベントハンドラを定義するng-mousedownなどはあるが、タッチイベントのng-touchstartなどがない。

Angularにng-touchstartが無かったので作ってみた - SundayHackingを参考に、$swipeを使わないようにすることでマウスイベントと別に処理できるようにしてみた。

まず共通に使える関数を用意して：

// my_directive.js
const createDomEventHandler = (eventName, directiveName) => ['$parse', function($parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      const handler = $parse(attrs[directiveName])
      $(element).on(eventName, ($event) => {
        scope.$apply(() => {
          return handler(scope, {$event})
        })
      })
    }
  }
}]

ディレクティブとして定義する：

// my_directive.js
angular.module('myCustomModule', [])
  .directive('ngTouchstart', createDomEventHandler('touchstart', 'ngTouchstart'))
  .directive('ngTouchmove', createDomEventHandler('touchmove', 'ngTouchmove'))
  .directive('ngTouchend', createDomEventHandler('touchend', 'ngTouchend'))

以上でng-mousedownなどと同様に使用できるようになる：

// index.html
<div ng-touchstart="myTouchstartHandler($event)"
     ng-touchmove="myTouchmoveHandler($event)"
     ng-touchend="myTouchendHandler($event)">
</div>

関連記事

新着記事