ngTouch module prevent redirect to url from href attribute

Question

Something wrong happens with my application on mobile devices. I have something like this:

<a href="#!/kategori/hva-skjer" ng-click="toggleMenu()">

This is one of link in menu. What I want and what works well on dekstop is closing menu and redirect to proper url from href attribute.

This wont working on mobile devices (on emulator in chrome devtools too). It's toggling the menu, but without redirection.

When I remove ngTouch module from dependencies in app bootstrap file, the problem dissapears.

Someone had similar situation and know already solution? Or it's a bug of ngTouch module?

Demo

In your dev tools enable touch emualation and click on links. As you can see toggle function working when links not.

http://plnkr.co/edit/1TldHkHvVfo4OmH7MLk4?p=preview

Answer 1

It's an old bug, that wasn't fixed before this time. Href and ng-click doesn't work together.

Below you see how can you avoid this bug.

https://stackoverflow.com/a/34612541/4245233

Answer 2

I don't know if this is still helpful, seeing as the question is over a year old, but I ran in the exact same issue recently. There seems to be a known bug concerning ngTouch. (https://github.com/angular/angular.js/issues/5307)

The solution that worked for me goes as follows :

Replace the content of your ng-touch file (angular-touch.js) with the file you can find here. (This step might not be necessary for some, but for me it was for some reason.)

Then go into the file and change the following lines :

ngTouch.directive('ngClick', ['$parse', '$timeout', '$rootElement',
function($parse, $timeout, $rootElement) {

to :

ngTouch.directive('ngClick', ['$parse', '$timeout', '$rootElement', '$location',
function($parse, $timeout, $rootElement, $location) {

Then find this part :

    if (!angular.isDefined(attr.disabled) || attr.disabled === false) {
       element.triggerHandler('click', [event]);
     }

And add an if right below it like so :

if (!angular.isDefined(attr.disabled) || attr.disabled === false) {
       element.triggerHandler('click', [event]);
     }
if the element has an href attribute, ensure that the url gets updated.
   if (attr.href && angular.isString(attr.href)) {
    $location.url(attr.href);
   }

You could also stop using href and manually change your hrefs to the location.go() function, but this solution does that for you.