ng-touchstart and ng-touchend in Angularjs

Question

I have an element which fires functions on ng-mousedown and ng-mouseup. However, It doesn't work on touch screen, is there any directive like ng-touchstart and ng-touchend?

score 14 · Answer 1 · answered Oct 03 '14 at 09:51

There is a module for this: https://docs.angularjs.org/api/ngTouch

But you can write your own directives for events too:

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
    </head>
    <body ng-app="plunker">
        <div  ng-controller="MainCtrl">
            <div my-touchstart="touchStart()" my-touchend="touchEnd()">
                <span data-ng-hide="touched">Touch Me ;)</span>
                <span data-ng-show="touched">M-m-m</span>
            </div>
        </div>
        <script>
            var app = angular.module('plunker', []);
            app.controller('MainCtrl', ['$scope', function($scope) {
                $scope.touched = false;

                $scope.touchStart = function() {
                    $scope.touched = true;
                }

                $scope.touchEnd = function() {
                    $scope.touched = false;
                }
            }]).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); 
                        });
                    });
                };
            }]);
        </script>
    </body>
</html>

I installed this module yesterday and I wrote this post after. I will try with these directives. — ciembor, Oct 03 '14 at 10:33
Angular's ngTouch library does not support binding to individual touch and release events: http://stackoverflow.com/questions/19985097/can-angulars-ngtouch-library-be-used-to-detect-a-long-click-touch-hold-release — gregtzar, Jan 22 '15 at 20:52

score 8 · Answer 2 · answered Feb 03 '15 at 13:23

8

I have made those ealier today since I needed it myself:

ngTouch (a collection of the below)
ngTouchmove
ngTouchstart
ngTouchend

Hope it helps.

answered Feb 03 '15 at 13:23

Mark Topper

652
1
8
23

I would like to use ngTouchstart, but unfortunately it uses eval(), which will break in a Chrome app. – Kevin MacDonald Aug 25 '15 at 23:31
1

thanks! can it decide moving left or right from the directive ? – MartianMartian Sep 01 '16 at 06:09
@Matian2040, for that I would use [ngTouchstart](https://github.com/marktopper/ngTouchstart) and [ngTouchmove](https://github.com/marktopper/ngTouchmove) (or together with [ngTouch](https://github.com/marktopper/ngTouch)) library. Then save the coordinations for the `touchstart` event, and then on `touchmove` I would check the coordinates against the new event. – Mark Topper Sep 09 '16 at 06:35
@MarkTopper where in the object are the touch coordinates stored? – flexxxit Jul 02 '17 at 23:11

score 2 · Answer 3 · answered Aug 26 '15 at 22:58

The version we came up with uses $parse(), which is what $eval() uses internally. We specifically wanted to handle mousedown and touchstart events using a single directive, but in the angular way so we can include angular style expressions.

Like so:

angular.module("ngStudentselect", []).directive('ngStudentselect', ['$parse', '$timeout', '$rootElement',
function($parse, $timeout, $rootElement) {
    return function(scope, element, attr) {
        var clickHandler = $parse(attr.ngStudentselect);

        element.on('mousedown touchstart', function(event) {
            scope.$apply(function() {
                clickHandler(scope, {$event: event});
            });
        });
    };
}]);

This is a stripped down version of angular's ngClick directive.

ng-touchstart and ng-touchend in Angularjs

3 Answers3

Linked