ui-router: open state in new tab with target=“_bla

问题:

I am using ui-router for state navigation in angular application and in one of the scenario I have to navigate to a new state in an different tab.

I have the following state

.state("code",
        {
            url: "/code",
            params: { offer : null },
            templateUrl: "app/components/coupons/views/code.html"
        })

offer in param is an object. When navigating to this state in the same browser it works fine. But when navigating to this state in a different browser offer comes as null.

The same question was posted by another user here http://stackoverflow.hex1.ru/questions/33232761/ui-router-open-state-in-new-tab-with-target-blank-params-are-lost but here the param is a property and not an object. So, it could be added to url.

Thanks, Sam

回答1:

When you open a new tab, a new instance of your app is created in the new tab because it's based on javascript and it will not hold its parameters when the page is fresh. So your state loads with a null parameter because this page has no relation to the other page you had. As a workaround, I suggest you attach your data to $window and retrieve it on the new page.

回答2:

I have done it in typescript and it works:

var myWindow=this.$window;
var myData={data:'testData'};
myWindow.localStorage.myData=JSON.stringify(myData);
window.open(this.state.href('state', {}, {absolute: false, inherit: true}));

Then in the new tab Controller:

var myWindow=this.$window;
var myData=JSON.parse(myWindow.localStorage.myData);

回答3:

The clean way would be to not open a new browser tab. As said by sina a new instance of your angular app is created. That means all state that might be hold in services is lost. Can't think of a other possibilities:

1. Put relevant info in the url
2. I don't think that you can share information with $window but you could use localStorage
3. Cookies would also be a valid options

Javascript: sharing data between tabs