Opening URL with an anchor (#) in a new window/tab (angularjs with angular-ui router)

Question

I have a link to another page that uses an anchor with ui-sref:

`<a ui-sref="details({'id': '12345', '#': 'parts'})" target="_blank">
    to parts
</a>`

When the link is opened in the same window (without the target="_blank"), it works flawlessly, so it is correctly handled by the stateProvider. But when opening in a new window (target="_blank"), the anchor tag is ignored. The page is opened at the bottom, as if the anchor was not there - the page does not scroll to the fragment specified by the fragment identifier

Can I configure my state so that URLs with anchors are handled correctly? Something like:

function runsConfig($stateProvider) {
    $stateProvider
    .state('details', {
        url: '/details?id?#parts', // <-- add the anchor in the url definition? 
        ...
    })

But that does not work... It feels to me that this has been solved before, but I can't seem to find a hint on how to do it.

Edit

As @georgeawg and @Jonathan-Brizio suggested (thank you!!!) I have to trigger the scoll event myself at the right time, probably due to some embedded components that take a while to render. Why it works when opening the page in the same tab is beyond me.

Here is what did the trick:

vm.$onInit = function()
{
    $timeout($anchorScroll); 
};

Due to the missing wait time argument, the $anchorScroll is executed immediately when the components are rendered ($postLink() was still too early).

Again, thank you @georgeawg and @Jonathan-Brizio for helping out

When you say that it behaves as if the "anchor is not there", do you mean it doesn't scroll to the fragment specified by the fragment identifier? — georgeawg, Mar 21 '18 at 18:54
@georgeawg yes, exactly. Thank you for the comment, I have updated the description — Moritz Ringler, Mar 21 '18 at 19:01
@JonathanBrizio yes, it is an 'id' attribute on a div. It works when opening the link in the same page — Moritz Ringler, Mar 21 '18 at 19:04
Look at this answer: https://stackoverflow.com/a/14717011/2220962 You need to implement `$anchorScroll()` in your code! — Jonathan Brizio, Mar 21 '18 at 20:27

Opening URL with an anchor (#) in a new window/tab (angularjs with angular-ui router)

0 Answers0