web-dev-qa-db-fra.com

Angularjs $ state open link dans un nouvel onglet

J'essaie d'implémenter une fonction "lien ouvert dans un nouvel onglet" à l'aide de la fonction $ state.go. Ce serait génial s'il y avait quelque chose comme:

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

Y at-il un moyen de faire cela en utilisant AngularJS?

angularjsangular-ui-routerangular-ui
70
Alex Arvanitidis

Mise à jour: OK, je viens de le résoudre en utilisant le code suivant:

var url = $state.href('myroute', {parameter: "parameter"});
window.open(url,'_blank');
140
Alex Arvanitidis

J'ai juste essayé ceci - apparemment, en ajoutant target="_blank" marche avec ui-sref:

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

Enregistre le problème de l'ajout de code à votre contrôleur et vous donne l'URL en stationnaire comme avec n'importe quel lien normal. Gagnant-gagnant!

54
Patrick Calulo

Cela peut ne pas fonctionner sur localhost si votre application se trouve dans un sous-dossier. J'ai eu en fait le même problème.

J'ai essayé en ligne et cela a fonctionné comme prévu en utilisant:

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

J'ai eu un problème similaire, essayez ceci si rien des réponses précédentes ne fonctionne pour vous.

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

Donc, fondamentalement, tout en travaillant dans localhost, sans ajouter '#' il était juste de rediriger vers

localhost/preview

, au lieu de

localhost/Nom_du_projet/#/preview

Je ne parle pas ici de transmettre les données, mais simplement d'ouvrir $ state dans un nouvel onglet.

5
Deepak Bandi

La meilleure réponse que j'ai trouvée, étendre l'extension de ui.router, puisque la fonctionnalité n'existe pas. Vous pouvez trouver tous les détails ici:

Extension du Angular 1.x $ état.go du routeur ui)

Cependant, voici ma courte explication de ce qui doit être fait, ajoutez ceci à app.js ou angular app init:

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

Dans votre code

Vous pourrez faire:

$state.goNewTab('routeHere', { parameter1 : "parameter"});
4
Dalorzo

Essaye ça!

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

2
Miko
ui-sref="routeHere" href=""target="_blank"

ce code a résolu mon problème.

utilisez ceci dans une balise d'ancrage.

2
Zubair sadiq