AngularJS: accessing the ngTouch service from a directive?

Question

I really love how the new ng-click 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: element.on('click', function(){ ... })). Is there a way that I can bind an ng-click event to an element within a directive? Without having to manually put a ng-click tag on my element in the HTML of my view...?

I want to be able to harness the power of both click and touch events. I could obviously import a library (such as HammerJS or QuoJS) but I would prefer not to have to do that, especially since Angular is already doing it.

I can access the $swipe service and bind different elements to that, but is there a similar service for ngTouch?

For reference, this is an example of when I would want to do this:

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': ...});
         }
     }
}]);

UPDATE: As noted by below, the source code for the ng-click directive is here. Can anyone see a way to harness that code and turn it into a "bindable" service?

Answer 1

I don't think that's quite the right approach. I'd approach this by using a template within your directive and then using ngTouch within that.

mod.directive('datepicker', ['$timeout', function ($timeout) {
     return {
         template: '<div ng-touch="doSomethingUseful()"></div>',

         link: function (scope, elem, attrs) {
             var picker = new DatePicker();

             scope.doSomethingUseful = function () {
                 // Your code.
             }
         }
     }
}]);

UPDATE

Full example with additional attributes on the directive element:

http://codepen.io/ed_conolly/pen/qJDcr