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?

Answer 1

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