Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 358
Devesh Agrawal Avatar asked Apr 08 '15 04:04

Devesh Agrawal


People also ask

What is ng href in AngularJS?

AngularJS ng-href Directive 1 Definition and Usage. The ng-href directive overrides the original href attribute of an <a> element. ... 2 Syntax. Supported by the <a> element. 3 Parameter Values. A string value, or an expression resulting in a string.

What is ng-click in angular?

Introduction to AngularJs onclick AngularJS ng-click is an In-Built AngularJS directive that is mainly used to handle the click events on the HTML view and processing the data in the controller as per requirements. The ng-click directive can be used with multiple HTML elements such as button, input, select, checkbox, etc.

What is ng-href directive in angular?

Definition and Usage The ng-href directive overrides the original href attribute of an <a> element. The ng-href directive should be used instead of href if you have AngularJS code inside the href value. The ng-href directive makes sure the link is not broken even if the user clicks the link before AngularJS has evaluated the code.

How does click event work in angular?

is wrong. What is actually happening is that after your click, the click event is first handled by angular (defined by ng-click directive in angular 1.x and click in angular 2.x+) and then it continues to propagate (which eventually triggers the browser to navigate to the url defined with href attribute).


2 Answers

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>
like image 50
DrKHunter Avatar answered Oct 22 '22 22:10

DrKHunter


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

like image 24
Satyam Koyani Avatar answered Oct 22 '22 23:10

Satyam Koyani