href overrides ng-click in Angular.js

The question:

When both, href and ng-click attributes are defined:

<a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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.

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

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>]

http://docs.angularjs.org/api/ng.directive:select

Method 2

You can simply prevent the default behavior of the click event directly in your template.

<a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" ng-click="$event.preventDefault();logout()" />

Per the angular documentation,

Directives like ngClick and ngFocus expose a $event object within the scope of that expression.

Method 3

Here is another solution :

<a href="" ng-click=" rel="nofollow noreferrer noopener"logout()">Sign out</a>

i.e. Just remove the # from the href attribute

Method 4

You should probably just use a button tag if you don’t need a uri.

Method 5

Just one more hint. If you need real URL (to support browser accessibility) you can do the following:

template:

<a ng-href="{{link}}" rel="nofollow noreferrer noopener" 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

Method 6

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.

Method 7

This worked for me in IE 9 and AngularJS v1.0.7:

<a href="javascript:void(0)" rel="nofollow noreferrer noopener" ng-click="logout()">Logout</a>

Thanks to duckeggs’ comment for the working solution!

Method 8

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="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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="..." rel="nofollow noreferrer noopener" 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.

Method 9

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" rel="nofollow noreferrer noopener">Take me there</a>
  </body>

</html>

Method 10

I don’t think you need to remove “#” from href. Following works with Angularjs 1.2.10

<a href="#/" rel="nofollow noreferrer noopener" ng-click="logout()">Logout</a>

Method 11

You can also try this:

<div ng-init="myVar = 'www.thesoftdesign'">
        <h1>Tutorials</h1>
        <p>Go to <a ng-href="{{myVar}}" rel="nofollow noreferrer noopener">{{myVar}}</a> to learn!</p>
</div>

Method 12

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=" rel="nofollow noreferrer noopener"showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>

Method 13

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>

Method 14

Please check this

<a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" ng-click="logout(event)">Logout</a>

 $scope.logout = function(event)


 {
event.preventDefault();
alert("working..");
}

Method 15

//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 }}" rel="nofollow noreferrer noopener"></a></div>

Method 16

This works for me

<a href (click)="logout()">
   <i class="icon-power-off"></i>
   Logout
</a>

Method 17

 <a href="#">
       <span ng-click="logout()"> Sign out </span>
 </a>

I did like this and it worked for me.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment