CODEWITHSUNDEEP
angularjsangularjs-routing
Martin
Martin

Reputation: 24308

href="#" causes location address to change, can we avoid it?

I have a number of tabs that I handle special logic so no location bar address change should occur. I have the following

<a href="#">Home</a>

This behaves as expected, i.e. it gives me the hand mouse pointer when hovering over the buttons but clicking on then starts the route change. I want to be able to stop this.

I tried just remove the href or setting href="", seemed to have some success but it gave unexpected results when hovering.

What is the best practice here? Do I have to remove the href? So then I will need to style the tab using CSS to give me the mouse pointer when hovering? If I do leave the href="#" in the link then this causes a change of routing which is not what I was looking for.

I actually handle my login in a ngClick for each tab. This logic must not change the route.

Any ideas?

Upvotes: 3

Views: 5119

Answers (3)

user2793135
user2793135

Reputation: 163

Replace href with ng_click.

To get the hand mouse pointer, add the css style:

a { cursor: pointer ; }
a:hover   { color: #00c }  /* user hovers     */

Upvotes: 1

Blackhole
Blackhole

Reputation: 20401

If you don't use the <base> tag, you can simply use:

<a href="">Home</a>

Indeed, according to the documentation:

[...] the default action is prevented when href attribute is empty.

Well, the documentation is wrong, and the real behaviour is actually to prevent the default action when the href attribute is equal to page location. That's a problem when you're using <base>. In this case, you have two choices:

  • Forget the href attribute. That works fine, but your page will not be valid anymore, since the href attribute is mandatory for a <a> tag.
  • Create your own directive, for instance aEmpty, whose goal is simply to fill the href attribute of a real <a> with the current value of $location.path().

In all cases, you'd better to actually use CSS to style your link, because that's always a bad idea to rely on the default behaviour of the browsers.

Upvotes: 3

AlwaysALearner
AlwaysALearner

Reputation: 43947

Try doing:

<a href="javascript:void(0);">Home</a>

Upvotes: 6

Related Questions