angularjs - start - ui-router: estado abierto en una nueva pestaña con target="_ blank", se pierden los parámetros

ui-router params

Question

Estoy haciendo una aplicación angular en la que las filas de una tabla tienen un botón cada una, y al hacer clic en estos botones se debe abrir una nueva pestaña para la fila en la que está el botón.

Necesitaba pasar parámetros a la nueva pestaña creada de esta manera. He declarado el parámetro en la inicialización de estado:

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

y el botón tiene algo como esto:

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

Los params se pasan, todo funciona como se esperaba.

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

Pero agregar target="_blank" a la etiqueta <a> hace que el objeto $ state.params devuelva lo siguiente:

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

He buscado durante horas, he consultado la documentación del ui-router y el rastreador de problemas para encontrar algo que aborde mi situación, pero no he encontrado nada.

¿Los parámetros de estado no se pasan en target=''_blank'' ''ed ui-sref ?

Answer 1

Hay otra forma sin usar la URL. Puede usar LocalStorage lugar de la URL.

Use ng-click en la etiqueta de enlace y llame a una función. En la función ponga sus parámetros en LocalStorage . Luego, en app.run use $rootScope.$on("$stateChangeStart") y compruebe si LocalStorage tiene parámetros. Luego, obtenga los params y llame a $state con params .

//in page controller:
var openNewTab = function () {
localStorage.newTab = JSON.stringify({
state: "yourState",
params: {
param1: "someparam1",
param2:"someparam2"
}
});
window.open(document.location.origin);
}
//angular app run config:
angularApp.run(function($state){
if(localStorage.newTab){
var newTab = JSON.parse(localStorage.newTab);
localStorage.removeItem("newTab");
$state.go(newTab.state, newTab.params);
event.preventDefault();
}
})

<a ng-click="openNewTab()" >open new tab</a>

Answer 2

Si hay algún parámetro que debería estar disponible fuera del contexto de SPA actual (nueva ventana, nueva pestaña) , DEBE formar parte de la url.

Esto funcionará:

.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"
});

Más detalles sobre params Cómo pasar parámetros usando ui-sref en el ui-router al controlador