Improve this Doc View Source $swipe

  1. service in module ngTouch

The $swipe service is a service that abstracts the messier details of hold-and-drag swipe behavior, to make implementing swipe-related directives more convenient.

Requires the ngTouch module to be installed.

$swipe is used by the ngSwipeLeft and ngSwipeRight directives in ngTouch, and by ngCarousel in a separate component.

Usage

The $swipe service is an object with a single method: bind. bind takes an element which is to be watched for swipes, and an object with four handler functions. See the documentation for bind below.

Methods

  • bind();

    The main method of $swipe. It takes an element to be watched for swipe motions, and an object containing event handlers.

    The four events are start, move, end, and cancel. start, move, and end receive as a parameter a coordinates object of the form { x: 150, y: 310 }.

    start is called on either mousedown or touchstart. After this event, $swipe is watching for touchmove or mousemove events. These events are ignored until the total distance moved in either dimension exceeds a small threshold.

    Once this threshold is exceeded, either the horizontal or vertical delta is greater.

    • If the horizontal distance is greater, this is a swipe and move and end events follow.
    • If the vertical distance is greater, this is a scroll, and we let the browser take over. A cancel event is sent.

    move is called on mousemove and touchmove after the above logic has determined that a swipe is in progress.

    end is called when a swipe is successfully completed with a touchend or mouseup.

    cancel is called either on a touchcancel from the browser, or when we begin scrolling as described above.

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.2.32/docs/api/ngTouch/service/$swipe