angularjs - How do I in AngularJS add two different events to a dom depending if is mobile or not

Question

I am trying to rewrite my application from being based on a ton of jQuery Widgets to use AngularJS. I am however having trouble finding the best solution to the following problem.

I have an image, which will show an overlay when hovering. To make it work on mobile devices, I instead use a click event to display the hover and to remove it again.

In jQuery I would look at the userAgent and then either add a click event for mobile devices, or for other devices user regular hover effect.

What is the correct way of doing this in AngularJS, without having to use jQuery?

Answer 1

In the current unstable version of angular there is basic support for mobile devices:

Example: ngTap

Answer 2

AngularJS is only a framework, not a DOM library, so you would still have to use jQuery.

You would create a custom directive for this. In the example below, I call it image-overlay.

<img src="foobar.png" image-overlay />

And then define your directive:

app.directive('imageOverlay', function() {
   return function(scope, element, attrs) {
      // element here is the img object to which you added the directive
      // use jQuery here to check user agent and apply the correct event.
   } 
});