Touch event on a link issue

[bullgare]

It's in AngularJS 1.2.3.
This is only happening on touch devices or in Google Chrome with touch event emulation enabled.
This link works (redirects to the url):
<a href="#/search">search</a>
And this link doesn't (no redirect occurs on tap):
<a href="#/search" ng-click="v = 1">search</a>
Click handler invoked and after that something strange happens inside of
element.on('touchend', function(event) (angular-touch.js:385).
Somehow it decides to prevent event by calling preventGhostClick(x, y);
It's really sad because it blocked our big mobile app to use AngularJS 1.2.3 in production. We're still on 1.0.8.

[tbosch]

Hi,
thanks for reporting this. Could you provide a jsfiddle or plunk?

[tbosch]

A workaround could be to use an empty href and put the navigation logic into ng-click using $location.

[bullgare]

Thanks for your advice. But I used another workaround. I did all I needed without ng-click. But it's still a bug as I think.
And finally i understood how to demonstrate this.

The steps are:

1. In Google Chrome: settings -> Overrides -> Check 'Enable' and 'Emulate touch events'. After that you must see that pointer is changed to a spot.
2. Open console. window.location.hash is outputed there.
3. Open each jsbin. The difference between them is in using and not using 'ngTouch' module.
   Inside ng-click handler I flush location.hash and after some timeout hope hash to be changed to the url in the href attribute.
   This one works (ngTouch disabled) - http://jsbin.com/iwoPuDIZ/1/edit?html,js,output
   This one is broken (ngTouch enabled) - http://jsbin.com/izIDAla/1/edit?html,js,output

[carlosrymer]

I created a directive that works around this issue:

https://gist.github.com/carlosrymer/9862232

[derekprior]

What is the reasoning behind stopping event propagation? It also prevents dropdown menu type functionality such as this:

<p ng-click="showMenu = !showMenu">Menu</p>

<ul ng-click="showMenu = false" ng-show="showMenu">
  <li><a href="/foo">Foo</a></li>
  <li><a href="/bar">Bar</a></li>
</ul>

The ng-click on the ul fires, which has the effect of closing the menu, but the navigation on the a does not occur.

[npepinpe]

+1

This is a rather problematic bug. I ended up simply listening to touchend since our webapp is strictly mobile, but it would be much nicer to use ng-click as is.

[ostux]

+1 this bug still exist....

[MaciejHadam]

default behaviour of link is broken, +1 to fix this bug

[stianlp]

+1

[xinsight]

+1
Another workaround is to add the following into your ng-click handler.

// <a ng-click="hideMenu($event)" ng-href="#/settings">
$scope.hideMenu = function (event) {
    // ...
    var href = angular.element(event.target).attr('href');
    if (event.type === 'touchend' && href) {
        href = href.substring(1); // remove initial #
        $location.path(href);
    }
};

[WraithKenny]

It'd be nice if we can get a response on wether this is a bug or a feature...I think it's a bug, but I'm new to Angular...

Is it recommended to not use ngHref when also using ngClick? If it is, I'll deal with it I guess, otherwise, it'd be nice to have this confirmed as a bug, and we can expect a bug fix sometime in the future.

(It was very unexpected, that when I added ngTouch for the swipe functionality, that this broken large portions of my app in ways that weren't readily obvious.)