Angular: link binding does not work on android if there is ng-click in its container
I have a PhoneGap app that uses Angular.
In the app, I am showing some content that should go to another page when clicked. However, if links in this content are clicked, they should take the user to their target, not the default target target.
However, I noticed that if the content wrapper has ng-click
, clicking on links does not take the user to that link. It works fine on Chrome on my PC, but not on my Android. This happens even if the attribute is ng-click
empty but not omitted.
The HTML I used to create it:
<div ng-click="">
some content
<a href="http://www.google.com">google</a>
other content
</div>
As I said, on my PC it works fine and clicking a link takes a browser on google.com, but on my Android phone, when I put the above HTML into my PhoneGap app, nothing happens when I click the link button ... If I remove the attribute ng-click
from the containing one div
, then the link works on the phone.
Any idea why this is happening, or more importantly how it can be fixed?
source to share
Below is a workaround for the problem. At the beginning of the ng-click
wrapper code, I added the following lines:
if($event && $event.target && $event.target.href) {
$event.target.click();
$event.preventDefault();
$event.stopPropagation();
return;
}
In the attribute ng-click
, when this code is called, I pass it $event
as an argument.
Also, I'm not sure $event.preventDefault();
, and $event.stopPropagation();
really needed. It worked fine on my android even without them, but I added them for added security.
source to share