2016.12.12
2017.4.17

touchstart、touchendイベントを登録する

AngularJSでng-clickのような感覚でtouchstart、touchendのイベント処理を登録しようとしたら、意外にもなくて驚きました。

どうやら自分で作成してあげる必要があるみたいで、調べたらすぐに見つかったので、ほとんどそのまま活用させていただいています。(javascript - ng-touchstart and ng-touchend in Angularjs - Stack Overflow

コード

HTML


<div my-touchstart="startProcess()" my-touchend="stopProcess()" ng-mousedown="startProcess()" ng-mouseup="stopProcess()">
</div>

JS


var myApp = angular.module('myApp', []);
myApp.directive('myTouchstart', [function() {
    return function(scope, element, attr) {

        element.on('touchstart', function(event) {
            scope.$apply(function() { 
                scope.$eval(attr.myTouchstart); 
            });
        });
    };
}]).directive('myTouchend', [function() {
    return function(scope, element, attr) {

        element.on('touchend', function(event) {
            scope.$apply(function() { 
                scope.$eval(attr.myTouchend); 
            });
        });
    };
}]);

とても簡単ですね。

AngularJS】関連記事