AngularJS - ng-click + ng-touch not working properly on mobile

Question

I have both ng-click and ng-touch on a button used for search.

On desktop the search and the functions called in ng-click work properly. On mobile on the other side the search button stops working because of the ng-click I think.

I there a solution to disable ng-click on mobile? Or another solution to this problem? I need them both so I can't just remove ng-click.

Thank you.

Answer 1

If you can use third party libs I recommend you using AngularHammer. I tested it in platforms where we have both desktop and mobile apps and is working really well.

https://ryanmullins.github.io/angular-hammer/

Using this lib and changing ng-click and ng-touch for hm-tap should work.

This is an example

<button class="button button-primary" type="button" hm-tap="myCtrl.myFunction(myParam)">MyButton</button>

Answer 2

What about playing with css?

Set some kind of css that will show the button with ng-click, something like this

@media only screen
and (min-device-width: 1024px) {
    .name-of-class-of-button-for-desktop{
    }
    .name-of-class-of-button-for-mobile{
        display:none;
    }
}

And for the device with lower resolution show the button with ng-touch, add this kind of css(Of course adapt it for your purpose)

@media only screen
and (min-device-width: 1px) /* 1 px it's an example :D */
and (max-device-width: 1023px) {
    .name-of-class-of-button-for-desktop{
        display:none;
    }
    .name-of-class-of-button-for-mobile{
    }
}

I suggested this as an answer, because if I understand well, you don't need the ng-click on mobile, am I wrong?