ng-click overrides ng-href (or plain href)

[smakus]

if you have an ng-click-click attribute in conjunction with an ng-href or plain href in an <a> tag, the ng-href/href will be ignored, and the link will never change location of the browser. Ng-click's function will be called, but the location.href will never change.

[lefos987]

Hi @smakus . Can you please provide with an example of the issue? Which version of Angular do you use?
I tried it with both href and ng-href and a ng-click attached to the element and the function is executed and then location updates.

[iblong2iyush]

I just experienced the same issue both with href and ng-href

[gilles-degols]

The problem does not appear with the browser, but it appears with android 2.3 (at least, I do not have any other android version to test). Only ng-click will be called but not ng-href nor href.
Funny thing, if you click multiple times very fast, the href might work.

[doaboa]

Same issue -- mobile web only, ios as well as android.

[diegoarcega]

Same here.

code
ng-href="{{item.url}}" ng-click="navCollapsed = !navCollapsed"

What I want to do is to make the state change and the navbar collapse when the user clicks the link. I don't want to make a function to address this issue, any ideas?

• AngularJS 1.4.9

[gkalpak]

I don't think Angular does anything to prevent you from applying both the href and ngClick.
If you are running into such a problem, please post a minimal demo (e.g. using CodePen, Plnkr etc).

[carinafu]

Same issue here,

web is ok, just occur on mobile device.

I just set href to empty and use ngClick.

I use angular 1.48

[gkalpak]

@carinafu, are you using ngTouch by any chance ?

[carinafu]

@gkalpak yes, I injected ngTouch. is that the cause to the problem?

[gkalpak]

@carinafu, it might. ngTouch defines an ngClick directive of its own and overrides the default behavior.
Could you check if the issue happens without ngTouch ?

(Note that ngTouch's ngClick has recently been deprecated and disabled by default.)

[carinafu]

@gkalpak I have tried, it still has same problem even if I remove ngTouch

[gkalpak]

@carinafu, I can't reproduce the issue. If you can post a minimal demo (e.g. using CodePen, Plnkr etc) and some info on what devices/browsers the problem appears on, I'd be happy to investigate.
Without a way to reproduce it, there's not much we can do, though.

[EvanTedesco]

I am having this issue as well since adding ng-touch. My example is exactly as above.

a(ng-href="{{ 'public-device-offers' | route:[routeClassification] }}" ng-click="vm.mobileCollapse()")

@mobileCollapse = () ->
@isCollapsed = true if window.innerWidth < mobileBreakpoint

[kukipei]

I have the same problem. It is working on desktop but doesn't on mobile devices.
This is the code
<a ng-href="/#![[::value.url]]" ng-click="::HeaderController.closeMenu(value.url)" ng-if="::(value.route|lowercase) !== 'overview_children'"> <span class="text_label">[[::value.label]]</span> </a>

Any ideas what can be the problem? Angular version AngularJS v1.5.8

[eazy-g]

This is still an issue. I'm working on a Samsung Galaxy S7 (SM-G930F) device, Android version 6.0.1

Angular 1.5.8
Cordova 6.4.0

@btford

I worked around it by wrapping the <a> tag in a <div>, and moving the ng-click to the <div>

[rahimnagori]

something like this :

<div ng-click="someFunction();">
 <div>Some Content</div>
 <div>Some Another Content</div>
 <a href="#/changePage">Redirect To Any Location</a>
</div>

In the above code, everytime when I click inside the main div only ng-click function works but how can I force to click on tag also?