feat($state): support URLs with #fragments

[mismith]

Allow setting the # param to update the location fragment; e.g.: ui-sref="page({name: 'name', '#': 'frag'})" or $state.go('page', {name: 'name', '#': 'frag'})

Improving upon #1855

[nateabele]

Patch looks good. 👍 I'll just wait for Travis to do its thing.

[qdb]

Hi there,

Any idea when we can expect release version with this update?

[mismith]

Looks like it's in 0.2.14 now :) Thanks ui-router team!

[kikar]

It doesn't seem to work for me.

This is the anchor:
<a id="pricing">Pricing</a>

And this is the link:
<a ui-sref="public.home('#': 'pricing')">PRICING</a>

Do I have to change something else?

[nateabele]

@kikar You forgot the { ... }:

<a ui-sref="public.home({ '#': 'pricing' })">PRICING</a>

[kikar]

@nateabele Still not working, goes to right page, but doesn't scroll to anchor nor changes the url.
Is it a problem if the anchor is in a subview, and the link is in the parent view?

[alexlawrence]

@nateabele @kikar Same here. Goes to the right page but does not jump to the anchor.

[nateabele]

Not sure. Can you open a new issue with a link to a plunkr that demonstrates the issue? Thanks.

[vike27]

Not working for me either, goes to correct page with correct fragment but does not jump to anchor.

<a id="yoh">GOING HERE!<a> 
<a class="pull-right" ui-sref="reserve({ '#':'yoh' })"><strong>Edit</strong></a>

[NateEag]

@nateabele - #1961 was (wrongly) closed as a duplicate of #701, and has a Plunkr demonstrating this exact issue in version 0.2.14:

http://plnkr.co/edit/6KM0DRXB38gcGjgYkgjd?p=preview

[chedched]

Same problem here.

[qdb]

Guys,

I think it is not going to work the way you expect. As far as I understand router code, the ui-sref transitions to new state on click, which usually means load new view or subview and run associated controller. It does not handle scrolling for you (except for autoscroll to view mentioned below). I believe you need to scroll to the given element yourself using something like https://docs.angularjs.org/api/ng/service/$anchorScroll

Things to consider:

1. scrolling can be hijacked by the router itself if you use autoscroll https://github.com/angular-ui/ui-router/wiki/Quick-Reference#autoscroll
   I am not sure what happens if you try to use both router autoscroll and angular's native method at the same time. I think you should not.

2. Make sure to scroll after your DOM renders Otherwise you may scroll to wrong position. This can sometimes be achived using $timeout with 0 seconds, but if you load images, it can be more tricky.

Good luck

[klmdb]

Does anyone know how to get this working with smooth scrolling please?

[Sekhno]

Thank you!

[lookfirst]

Let's say you have a link on Page A in the common footer of the page:

<a ui-sref="root.support.index({'#': 'top'})" ui-sref-active="active">Help</a>

You then click on that link to take you to Page B root.support.index. When you click on the link, the ui-sref-active isn't re-evaluated, so the link stays active on the next page.

This works fine when the argument ({'#': 'top'}) is removed or if Page B is reloaded in the browser.

[egomezv91]

For me it doesn't work, I have te same problem who lookfirst, the first time it go to the Page B but don't scroll and if you reload the browser, or go back and press the link again it work good. I wait new comments and if someone can find a solution. Thanks in advance