39 lines
2.9 KiB
HTML
Executable file
39 lines
2.9 KiB
HTML
Executable file
<a href="http://github.com/angular/angular.js/tree/v1.2.0rc1/src/ngTouch/swipe.js#L3" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ngTouch/swipe.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">$swipe</code>
|
|
<div><span class="hint">service in module <code ng:non-bindable="">ngTouch</code>
|
|
</span>
|
|
</div>
|
|
</h1>
|
|
<div><h2 id="Description">Description</h2>
|
|
<div class="description"><div class="ngtouch-swipe-page"><p>The <code>$swipe</code> service is a service that abstracts the messier details of hold-and-drag swipe
|
|
behavior, to make implementing swipe-related directives more convenient.</p>
|
|
<p>Requires the <a href="api/ngTouch"><code>ngTouch</code></a> module to be installed.</p>
|
|
<p><code>$swipe</code> is used by the <code>ngSwipeLeft</code> and <code>ngSwipeRight</code> directives in <code>ngTouch</code>, and by
|
|
<code>ngCarousel</code> in a separate component.</p>
|
|
<h3>Usage</h3>
|
|
<p>The <code>$swipe</code> service is an object with a single method: <code>bind</code>. <code>bind</code> takes an element
|
|
which is to be watched for swipes, and an object with four handler functions. See the
|
|
documentation for <code>bind</code> below.</p>
|
|
</div></div>
|
|
<div class="member method"><h2 id="Methods">Methods</h2>
|
|
<ul class="methods"><li><h3 id="bind">bind()</h3>
|
|
<div class="bind"><div class="ngtouch-swipe-bind-page"><p>The main method of <code>$swipe</code>. It takes an element to be watched for swipe motions, and an
|
|
object containing event handlers.</p>
|
|
<p>The four events are <code>start</code>, <code>move</code>, <code>end</code>, and <code>cancel</code>. <code>start</code>, <code>move</code>, and <code>end</code>
|
|
receive as a parameter a coordinates object of the form <code>{ x: 150, y: 310 }</code>.</p>
|
|
<p><code>start</code> is called on either <code>mousedown</code> or <code>touchstart</code>. After this event, <code>$swipe</code> is
|
|
watching for <code>touchmove</code> or <code>mousemove</code> events. These events are ignored until the total
|
|
distance moved in either dimension exceeds a small threshold.</p>
|
|
<p>Once this threshold is exceeded, either the horizontal or vertical delta is greater.
|
|
- If the horizontal distance is greater, this is a swipe and <code>move</code> and <code>end</code> events follow.
|
|
- If the vertical distance is greater, this is a scroll, and we let the browser take over.
|
|
A <code>cancel</code> event is sent.</p>
|
|
<p><code>move</code> is called on <code>mousemove</code> and <code>touchmove</code> after the above logic has determined that
|
|
a swipe is in progress.</p>
|
|
<p><code>end</code> is called when a swipe is successfully completed with a <code>touchend</code> or <code>mouseup</code>.</p>
|
|
<p><code>cancel</code> is called either on a <code>touchcancel</code> from the browser, or when we begin scrolling
|
|
as described above.</p>
|
|
</div></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|