Angularjs $ state abrir enlace en nueva pestaña

81

Estoy tratando de implementar una función "abrir enlace en una nueva pestaña" usando la función $ state.go. Sería increíble si hubiera algo como:

$state.go('routeHere', {
    parameter1 : "parameter"
    }, {
    reload : true,
    newtab : true // or smth like target : "_blank"
});

¿Hay alguna forma de hacerlo usando AngularJS?

angularjs angular-ui-router angular-ui Alex Arvanitidis
fuente
La edición en la pregunta que dice que lo resolvió con el siguiente código parece redundante. Es decir. está implícito en el hecho de que lo eligió como su respuesta aceptada.
Adam Zerner
Corregido, eliminado la edición.
Alex Arvanitidis
Puede encontrar la respuesta aquí Angularjs $ state open link in new tab
Dalorzo

Respuestas:

153

Actualización: OK, lo acabo de resolver usando el siguiente código:

var url = $state.href('myroute', {parameter: "parameter"});
window.open(url,'_blank');
Alex Arvanitidis
fuente
18
¿No debería ser $ window para las mejores prácticas?
tsuz
3
¿Está seguro de que el parámetro se puede pasar a una nueva ventana?
hjl
Sí @elaijuh se pasarán
Manuel Di Iorio
@alex quiero apuntar a una ventana definida, así que probé window.open (url, 'myWindow'); pero no funciona. ¿Alguna ayuda?
mhd
1
Tenga en cuenta que si abre un enlace desde javascript de esta manera y la URL base cambia, es probable que el navegador lo bloquee diciendo que el sitio intentó abrir una ventana emergente, pero si el usuario acepta o autoriza su sitio web para hacerlo, entonces lo hará. trabajo.
GabLeRoux
55

Acabo de probar esto, aparentemente, agregando target="_blank"funciona con ui-sref:

<a ui-sref="routeHere" target="_blank">A Link</a>

Ahorra la molestia de agregar código a su controlador y le brinda la URL al pasar el mouse como con cualquier enlace normal. Ganar-ganar!

Patricio Calulo
fuente
3
esto solo funciona en un <a>. "target" aparentemente no funciona en otros elementos. es decir, <button ui-sref = "routeHere" target = "_ blank"> Un enlace </button>
Luis
2
Los botones de @Luis no tienen el atributo Target, así que sí, no funcionará
gerl
1
@Luis Tal vez puedas usar clases relacionadas con botones y rol como botón para etiqueta de anclaje para que parezca un botón. Por ejemplo:<a ui-sref="routeHere" target="_blank" class="btn btn-primary" role="button">A Link</a>
Safwan
7

Tuve un problema similar, intente esto si nada de las respuestas anteriores funciona para usted.

var url = '#' + $state.href('preview');
window.open(url,'_blank');

Entonces, básicamente, mientras trabajaba en localhost, sin agregarlo '#', solo estaba redirigiendo a

localhost / vista previa

, en lugar de

localhost / Project_Name / # / vista previa

No me refiero a pasar los datos, solo para abrir $ state en una nueva pestaña.

Deepak Bandi
fuente
6

Es posible que no funcione en localhost en caso de que su aplicación esté en una subcarpeta. De hecho, tuve el mismo problema.

Lo intenté en línea y funcionó como se esperaba usando:

<a ui-sref="routeHere" target="_blank">Link</a>
FrancescoMussi
fuente
4

La mejor respuesta que encontré fue extender el ui.router, ya que la función no existe incorporada. Puede encontrar el detalle completo aquí:

Extendiendo $ state.go del ui-router Angular 1.x

Sin embargo, aquí está mi breve explicación de lo que se debe hacer, agregue esto a app.js o al archivo de inicio de la aplicación angular:

angular.module("AppName").config(['$provide', function ($provide) {
    $provide.decorator('$state', ['$delegate', '$window',
        function ($delegate, $window) {
            var extended = {
                goNewTab: function (stateName, params) {
                    $window.open(
                        $delegate.href(stateName, params, { absolute: true }), '_blank');
                }
            };
            angular.extend($delegate, extended);
            return $delegate;
        }]);
}]);

En tu código

Podrás hacer:

$state.goNewTab('routeHere', { parameter1 : "parameter"});
Dalorzo
fuente
3 
ui-sref="routeHere" href=""target="_blank"

este código resolvió mi problema.

use esto en una etiqueta de anclaje.

Zubair sadiq
fuente
2

¡Prueba esto!

<a ui-sref="routeHere({parameter: vm.parameter})" target="_blank"></a>

Miko
fuente
Esto es irrelevante, no dije que necesitaba agregar parámetros a la ruta que llamo, dije que quiero abrir esta ruta en una nueva pestaña.
Alex Arvanitidis
Esto puede ser relevante para muchas personas. Solo usé esto. Una cosa a mencionar aquí es que el nombre del parámetro debe estar entre comillas simples. <a ui-sref="routeHere({'parameter': vm.parameter})" target="_blank"> </a>
Sudheer Muhammed