Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS: accessing the ngTouch service from a directive?
    text
    copied!<p>I really love how the new <code>ng-click</code> directive in Angular now automatically includes functionality for touch events. However, I am wondering if it is possible to access that touch-event service from my custom directive? I have lots of directives that require that I bind a click event to the given element, but I'm simply doing that using the typical jquery syntax (ex: <code>element.on('click', function(){ ... })</code>). Is there a way that I can bind an <code>ng-click</code> event to an element within a directive? Without having to manually put a <code>ng-click</code> tag on my element in the HTML of my view...?</p> <p>I want to be able to harness the power of both click <em>and</em> touch events. I could obviously import a library (such as <a href="http://eightmedia.github.io/hammer.js/" rel="noreferrer">HammerJS</a> or <a href="http://quojs.tapquo.com/" rel="noreferrer">QuoJS</a>) but I would prefer not to have to do that, especially since Angular is already doing it.</p> <p>I can access the <a href="http://code.angularjs.org/1.2.0rc1/docs/api/ngTouch.$swipe" rel="noreferrer"><code>$swipe</code></a> service and bind different elements to that, but is there a similar service for <code>ngTouch</code>?</p> <p>For reference, this is an example of when I would want to do this:</p> <pre><code>mod.directive('datepicker', ['$timeout', function($timeout){ return { link: function(scope, elem, attrs){ var picker = new DatePicker(); elem.on('click', function(e){ picker.show(); }); // I would rather do something like: // elem.on('ngTouch', function(){ ... }); // // or even: // $ngTouch.bind(elem, {'click': ..., 'touch': ...}); } } }]); </code></pre> <p>UPDATE: As noted by below, the source code for the <code>ng-click</code> directive is <a href="https://github.com/angular/angular.js/blob/v1.2.0-rc.3/src/ngTouch/directive/ngClick.js#L193" rel="noreferrer">here</a>. Can anyone see a way to harness that code and turn it into a "bindable" service?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload