Angular-ui-router and href='#'

Question

I'm using angular-ui-router and have an issue with empty a tags, like href='#'. I'm using bootstrap, which makes extensive use of href='#' for dropdowns and such. The problem is if a user selects a dropdown item then the router interprets that as a state change, which in this case is to the home page.

Is there an easy way to stop this behavior without having to resort to changing all the href='#' to href=''.

Can't you just remove the href attribute completely? It works for me when I'm using bootstrap and angular. — adam0101
– adam0101, Commented Aug 28, 2014 at 15:28
Yeah, is that safe cross-browser? I guess so, but just wanted be sure. — Mike P
– Mike P, Commented Aug 28, 2014 at 15:40
An interesting side note, the basic angular router doesn't do this. — Mike P
– Mike P, Commented Aug 28, 2014 at 15:42
Take a look at angular-ui.github.io/bootstrap native angular directives and helpers for bootstrap. Replaces the jQuery pluggins provided my bootstrap — Martin
– Martin, Commented Aug 28, 2014 at 19:46

adam0101 · Accepted Answer · 2016-02-12 17:26:59Z

10

Just remove the href tag completely from your anchor tag. It's still a perfectly valid tag without it.

Or if you're currently using ui-sref in the anchor tag, you could actually use the href attribute instead to go to the route that the state is mapped to.

edited Feb 12, 2016 at 17:26

answered Aug 28, 2014 at 19:39

adam0101

31.5k22 gold badges102 silver badges193 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike P Over a year ago

Thanks, this is what I did in the end.

adam0101 Over a year ago

Why did someone downvote my answer? Care to give an explanation?

user1663023 Over a year ago

In the Bootstrap collapse, we need to do something like this: <a data-toggle="collapse" data-parent="#accordion" href="#3">, how can it work without the href?

adam0101 Over a year ago

@ElgsQianChen, in that case, I would use the collapse or accordion directives that come with Angular-UI: angular-ui.github.io/bootstrap

Rantiev Over a year ago

Yep removal of href="#" does the thing. But it seems ui-router scroll ui-sref=('#', 'element') only once. The second click did nothing. So to fix this thing i use something like that: this.scrollToElement = function (id) { $location.hash(id); $anchorScroll(); };

Hichem ben chaabene · Accepted Answer · 2014-12-13 07:46:23Z

2

you can use this, so you can preserve the link and basically do nothing when its clicked

<a ui-sref="state" href="javascript:void(0);">Your link</a>

answered Dec 13, 2014 at 7:46

Hichem ben chaabene

1456 bronze badges

1 Comment

zigzag.bond Over a year ago

I have used your code like below which works <a ui-sref="state" href="#collapseOne">Your link</a>

Devin McQueeney · Accepted Answer · 2015-12-30 21:35:11Z

1

I use this:

<a href-void>Click me! I don't do anything, but i'm still a link!</a>

answered Dec 30, 2015 at 21:35

Devin McQueeney

1,2972 gold badges14 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular-ui-router and href='#'

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related