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