ui-router: open state in new tab with target="_blank", params are lost

Question

I'm doing an Angular app in which a table's rows has a button each, and on click of these buttons a new tab should be opened for the row that button is on.

I needed to pass parameters into the new tab created this way. I've declared the parameter in the state initialization:

.state('viewlisting', {
   url: "/listings/:id",
   params: {
     'action': '',
   },
   controller: 'ListingsController',
   templateUrl: "partials/listings/view_listing.html"
 });

and the button has something like this:

ui-sref='viewlisting({id:"+data+", action:"images"})'

The params are passed in, everything works as expected.

//URL: /#/listings/42
$state.params.action //returns "images"
$state.params.id //returns "42"

But adding target="_blank" to the <a> tag causes the $state.params object to return the following:

//URL: /#/listings/42
$state.params.action //returns ""
$state.params.id //returns "42"

I've searched for hours, I've looked at the ui-router documentation and the issue tracker for something that addresses my situation but I've found nothing.

Are state parameters not passed on target='_blank''ed ui-sref links?

Solution

If there is any parameter which should be available outside of the current SPA context (new window, new tab) - it MUST be part of the url.

This will work:

.state('viewlisting', {
   // instead of this
   // url: "/listings/:id",
   // this will keep the action in a new window
   url: "/listings/:id?action",
   params: {
     'action': '',
   },
   controller: 'ListingsController',
   templateUrl: "partials/listings/view_listing.html"
 });

More details about params How to pass parameters using ui-sref in ui-router to controller

Comments

[Ralph Sto. Domingo]

Thank you for this.. somehow I knew this was possible but I wanted to keep the action parameter from the URL. I just want to ask if there's a way where I can change the resulting url /listings/42?action=images to listings/42.

[Radim Köhler]

The answer should be clear now (I mean after my answer) - NO it is not possible. URL is only way how to talk to extern world. And that is new tab, new window or just a link send via email. All needed params must be embeded into url. Is it clear now?

[Ralph Sto. Domingo]

You've made that clear quite well, I was asking how to change the URL written on the address bar to listings/42 AFTER /listings/42?action=images. It's not as if I'm rejecting your answer, I just don't want to expose the parameter to the user, so I was thinking if I could just the change the URL AFTER the page loads.

[Radim Köhler]

Well, there are techniques how to apply redirect. E.g. here stackoverflow.com/q/29491079/1679310 (so you can swallow the params in the second state...) 1) user will be navigating to some state with url params 2) on state change this is taken, converted into $state.go and passed to other state, without url params. That could be the way...

[Ralph Sto. Domingo]

Thank you for the linked question! Will definitely try this. Thank you for your time also!