3

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?

Blackhole
  • 20,129
  • 7
  • 70
  • 68
Martin
  • 23,844
  • 55
  • 201
  • 327

3 Answers3

6

Try doing:

<a href="javascript:void(0);">Home</a>
AlwaysALearner
  • 43,759
  • 9
  • 96
  • 78
  • Thanks, but is this not mixing js with html, i wanted to get away from that... Although if there is no other way ?? – Martin Aug 06 '13 at 13:12
  • If you want to retain your logic then you need to mix a bit of js with the html. Another option, as you have already mentioned would be to remove the href attribute and apply the cursor:pointer style to your element. – AlwaysALearner Aug 06 '13 at 13:18
  • Just a heads-up: Angular is a framework that relies heavily on extending HTML syntax, so I don't think you can get away from mixing Javascript (or Angular expressions) with HTML. And I think that's perfectly fine when using that sort of framework. This [question](http://stackoverflow.com/questions/12978507/dont-the-data-attribute-options-used-in-bootstrap-angular-js-and-ember-js-con) provides more insights on that matter. – Michael Benford Aug 06 '13 at 16:34
  • Thanks, this fixed my issue. And also agree with Michael here. – Martin Aug 07 '13 at 12:46
3

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.

Blackhole
  • 20,129
  • 7
  • 70
  • 68
1

Replace href with ng_click.

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

a { cursor: pointer ; }
a:hover   { color: #00c }  /* user hovers     */
tomrozb
  • 25,773
  • 31
  • 101
  • 122
user2793135
  • 163
  • 1
  • 2
  • 8