href overrides ng-click in Angular.js
HtmlAngularjsAnchorMarkupHtml Problem Overview
When both, href and ng-click attributes are defined:
<a href="#" ng-click="logout()">Sign out</a>
the href
attribute takes precedence over ng-click.
I am looking for a way to raise priority of ng-click.
href
is required for Twitter Bootstrap, I can't remove it.
Html Solutions
Solution 1 - Html
This example from the angular documentation site just does href
without even assigning it to an empty string:
[<a href ng-click="colors.splice($index, 1)">X</a>]
Solution 2 - Html
You can simply prevent the default behavior of the click event directly in your template.
<a href="#" ng-click="$event.preventDefault();logout()" />
Per the angular documentation,
> Directives like ngClick and ngFocus expose a $event object within the scope of that expression.
Solution 3 - Html
Here is another solution :
<a href="" ng-click="logout()">Sign out</a>
i.e. Just remove the # from the href attribute
Solution 4 - Html
You should probably just use a button tag if you don't need a uri.
Solution 5 - Html
Just one more hint. If you need real URL (to support browser accessibility) you can do the following:
template:
<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>
directive:
$scope.linkClicked = function(link){
// your code here
$location.path(link);
};
In this way your code in linkClicked() will have chance to execute before navigating to the link
Solution 6 - Html
In Angular, <a>
s are directives. As such, if you have an empty href
or no href
, Angular will call event.preventDefault
.
From the source:
element.on('click', function(event){
// if we have no href url, then don't navigate anywhere.
if (!element.attr(href)) {
event.preventDefault();
}
});
Here's a plnkr demonstrating the missing href
scenario.
Solution 7 - Html
This worked for me in IE 9 and AngularJS v1.0.7:
<a href="javascript:void(0)" ng-click="logout()">Logout</a>
Thanks to duckeggs' comment for the working solution!
Solution 8 - Html
There are so many answers for this question here but it seems there is a bit of confusion about what's actually going on here.
Firstly, your premise
> "href overrides ng-click in Angular.js"
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).(See this for more about event propagation in javascript)
If you want to avoid this, then you should cancel the event propagation using the The Event interface's preventDefault()
method:
<a href="#" ng-click="$event.preventDefault();logout()" />
(This is pure javascript functionality and nothing to do with angular)
Now, this will already solve your problem but this is not the optimal solution. Angular, rightfully, promotes the MVC pattern. With this solution, your html template is mixed with the javascript logic. You should try to avoid this as much as possible and put your logic into your angular controller. So a better way would be
<a href="#" ng-click="logout($event)" />
And in your logout() method:
logout($event) {
$event.preventDefault();
...
}
Now the click event will not reach the browser, so it will not try to load the link pointed by href
. (However note that if the user right clicks on the link and directly opens the link, then there won't be a click event at all. Instead it will directly load the url pointed by the href
attribute.)
Regarding the comments about visited link color in the browsers. Again this has nothing to do with angular, if your href="..."
points to a visited url by your browser by default the link color will be different. This is controlled by CSS :visited Selector, you can modify your css to override this behaviour:
a {
color:pink;
}
PS1:
Some answers suggest to use:
<a href .../>
href
is an angular directive. When your template is processed by angular this will be converted to
<a href="" .../>
Those two ways are essentially the same.
Solution 9 - Html
Just write ng-click before href ..It worked for me
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script>
angular.module("module",[])
.controller("controller",function($scope){
$scope.func =function(){
console.log("d");
}
})</script>
</head>
<body ng-app="module" ng-controller="controller">
<h1>Hello ..</h1>
<a ng-click="func()" href="someplace.html">Take me there</a>
</body>
</html>
Solution 10 - Html
I don't think you need to remove "#" from href. Following works with Angularjs 1.2.10
<a href="#/" ng-click="logout()">Logout</a>
Solution 11 - Html
You can also try this:
<div ng-init="myVar = 'www.thesoftdesign'">
<h1>Tutorials</h1>
<p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn!</p>
</div>
Solution 12 - Html
I'll add for you an example that work for me and you can change it as you want.
I add the bellow code inside my controller.
$scope.showNumberFct = function(){
alert("Work!!!!");
}
and for my view page I add the bellow code.
<a href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>
Solution 13 - Html
Did you try redirecting inside the logout function itself? For example, say your logout function is as follows
$scope.logout = function()
{
$scope.userSession = undefined;
window.location = "http://www.yoursite.com/#"
}
Then you can just have
<a ng-click="logout()">Sign out</a>
Solution 14 - Html
Please check this
<a href="#" ng-click="logout(event)">Logout</a>
$scope.logout = function(event)
{
event.preventDefault();
alert("working..");
}
Solution 15 - Html
//for dynamic elements - if you want it in ng-repeat do below code
angular.forEach($scope.data, function(value, key) {
//add new value to object
value.new_url = "your url";
});
<div ng-repeat="row in data"><a ng-href="{{ row.url_content }}"></a></div>
Solution 16 - Html
This works for me
<a href (click)="logout()">
<i class="icon-power-off"></i>
Logout
</a>
Solution 17 - Html
<a href="#">
<span ng-click="logout()"> Sign out </span>
</a>
I did like this and it worked for me.