Angular.js: Anchor links in HTML5 mode go to 'base url' and trigger a navigation event

[fwielstra]

I have an app with $locationProvider.html5Mode(true), so no hashes in the URLs; I figured I could use anchors like they used to again, but unfortunately that doesn't seem to be the case.

I made a plunkr to try and highlight the problem:

http://plnkr.co/edit/Upc89hCMMVbAhJaV2XYd?p=preview

full-screen with visible path version: http://run.plnkr.co/IA9Gwp52MzFpE1O6/

Issue 1 is that an <a href="#anchor"> will link to http://host/#anchor, instead of http://host/currenPath/#anchor.

Issue 2 is that when I create an url <a href="path/#anchor"> and click it, a navigation event is triggered - highlighted in the plunkr by a page transition animation.

StackOverflow questions offer answers like this work around the limitation by calling $location.hash() and $anchorScroll, but those will also trigger a navigation event. The second solution there is to reset $location.hash to the old value - i.e. none - to avoid the navigation event from triggering, but that removes the option to link directly to anchors from other pages and removes bookmarkability.

I came across issue #648 which seems to outline the same issue (two years ago), but it seems it stopped working sometime since then.

tl;dr: I'd like to do <a href="#anchor"> that links to an anchor at the current route, but it links to the base URL and triggers a navigation event.

[vojtajina]

@fwielstra You need to 1. set the <base href> without the trailing slash, 2. configure hashPrefix
(see http://plnkr.co/edit/tgin0gpQl1qwu9hVXBno?p=preview). Then it works.

I totally agree that this is not simple at all! I have a suggestion to make this better - when you set html5Mode to true, we should set the hashPrefix to some default value (probably !). We need to make sure we set it only if it has not been already overridden. Any other ideas?

Also, when clicking the first two links (#lorem, #ipsum) there is some url flickering going on (the url is set to the base path first) - that should not happen. I think that's a bug.

So action items:

1. set hashPrefix if html5Mode
2. fix the url flickering bug

[binarykitchen]

Hello guys, this bug is nasty - I experience a similar problem with the navigation event.

When I come from a page with anchors in the URL to the home page, duplicate navigation events are fired. For example from https://localhost:8080/versions#0.9.0 to https://localhost:8080/ will run the controller for / twice. This is messing up with the whole app.

[evan-duncan]

Any updates on this?

[jackhsu978]

I had the same issue. I found that it's because I had <base href="/">. Changing it to <base href=""> fixes the problem. I tested on Chrome, Firefox, and Safari.

[daniellavoie]

@vojtajina Thanks ! I had the same issue and you explanations made me double check my base href. Removing the front slash did it for me.

[bennlich]

@vojtajina The plunker doesn't seem to work for me. I added a log statement to the router controller so you can see that the controller is being re-instantiated every time you click. Is this expected?

http://plnkr.co/edit/a36L65c3vo8bFS0Bfszl?p=preview

[Narretz]

I think this boils down to a configuration issue. Also, I couldn't reproduce any flickering. See here http://plnkr.co/edit/rwct8raZ4xCpYfxImg9B?p=preview

[bennlich]

@Narretz Did you see my plnkr? Controller is getting reinstantiated every click.

http://plnkr.co/edit/a36L65c3vo8bFS0Bfszl?p=preview

[Narretz]

@bennlich strange, I thought my plunker didn't show the problem anymore. But it does now.