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?


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');

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!


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.


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>

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

3
ui-sref="routeHere" href=""target="_blank"

este código resolvió mi problema.

use esto en una etiqueta de anclaje.


2

¡Prueba esto!

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


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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.