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=''.

Answer 1

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.

Answer 2

I use this:

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

Answer 3

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>