Can we have both href and ng-click in Angular.js

Question

I have a text box:

<input type="text" ng-model="SearchText" >

And a link:

<a href="#signout" ng-click="SearchText=''">Sign out</a>

I want to exectue both in the above hyperlink. ng-click to empty text-box and #signout will ng-route to signout HTML and controller.

But I can see href overrides ng-click in Angular.js

How to execute both?

Sop

I can't reproduce this issue: jsbin.com/luyinojade/1/edit – Apuleius

Another option is you can also write function in ng-click which will clear text-box and change URL with $location. – Gaselier

@ChiragB What would that function look like if you wanted to change the url to any URL such as google.com? – Rayburn

@IanSteffy $window.location.href = 'google.co.in'; – Gaselier

My use-case is that i want to view a PDF on click and also trigger a function to note that the user has clicked it. – Barra

Answer 1

If you use ng-mouseup or ng-mousedown depending on when you need the event to fire it will not override ng-href like ng-click does.

<a ng-href="#signout" ng-mouseup="SearchText=''">Sign out</a>

Damaris

Answer 2

Use ng-href here with anchor tag.

<a ng-href="#signout" ng-click="SearchText=''">Sign out</a>

You can use ng-click with this too.

Demo

Herve

It is not related to that :-P – Harrie

Here href and ng-click also works fine. first click event executes and then anchor tag will make request. – Herve

This solution and demo does not work. ng-click is called and then we are sent to an error page that has nothing to do with the link. When this solution is used in my own example, like this example only ng-click is called and ng-href is ignored. – Rayburn