Angularjs $ state Link in neuem Tab öffnen

81

Ich versuche, eine Funktion "Link in neuem Tab öffnen" mit der Funktion $ state.go zu implementieren. Es wäre großartig, wenn es Folgendes gäbe:

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

Gibt es eine Möglichkeit, dies mit AngularJS zu tun?

angularjs angular-ui-router angular-ui

— Alex Arvanitidis
quelle

Das Bearbeiten in der Frage, dass Sie es mit dem folgenden Code gelöst haben, scheint überflüssig. Dh. Dies wird durch die Tatsache impliziert, dass Sie es als Ihre akzeptierte Antwort gewählt haben.

— Adam Zerner

Behoben, die Bearbeitung entfernt.

— Alex Arvanitidis

Sie können die Antwort hier finden Angularjs $ Zustand offener Link in neuem Tab

— Dalorzo

153

Update: OK, ich habe es gerade mit dem folgenden Code gelöst:

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

— Alex Arvanitidis
quelle

18

Sollte das nicht $ window für Best Practice sein?

— Tsuz

3

Sind Sie sicher, dass der Parameter an ein neues Fenster übergeben werden kann?

— hjl

Ja @elaijuh sie werden übergeben

— Manuel Di Iorio

@alex Ich möchte auf ein definiertes Fenster abzielen, also habe ich window.open (url, 'myWindow') ausprobiert. aber es funktioniert nicht. Irgendeine Hilfe?

— mhd

1

Beachten Sie, dass, wenn Sie einen Link aus Javascript auf diese Weise öffnen und sich die Basis-URL ändert, der Browser ihn möglicherweise blockiert und angibt, dass die Site versucht hat, ein Popup zu öffnen. Wenn der Benutzer Ihre Website jedoch akzeptiert oder autorisiert, wird dies der Fall sein Arbeit.

— GabLeRoux

55

Ich habe es gerade versucht - anscheinend fügte ich target="_blank"Werke hinzu mit ui-sref:

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

Spart das Hinzufügen von Code zu Ihrem Controller und gibt Ihnen die URL beim Schweben wie bei jedem normalen Link. Win-Win!

— Patrick Calulo
quelle

3

Dies funktioniert nur auf einem <a>. "Ziel" funktioniert anscheinend nicht mit anderen Elementen. dh <button ui-sref = "routeHere" target = "_ blank"> Ein Link </ button>

— Luis

2

@ Luis Buttons haben kein Target-Attribut, also ja, es wird nicht funktionieren

— gerl

1

@Luis Vielleicht können Sie Schaltflächenklassen und Rollen als Schaltfläche für das Ankertag verwenden, damit es wie eine Schaltfläche aussieht. ZB:<a ui-sref="routeHere" target="_blank" class="btn btn-primary" role="button">A Link</a>

— Safwan

7

Ich hatte ein ähnliches Problem. Versuchen Sie dies, wenn nichts aus früheren Antworten für Sie funktioniert.

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

Während der Arbeit in localhost wurde also ohne Anhängen '#'nur umgeleitet

localhost / Vorschau

, Anstatt von

localhost / Projektname / # / Vorschau

Ich gehe hier nicht darum, die Daten zu übergeben, nur um $ state in einem neuen Tab zu öffnen.

— Deepak Bandi
quelle

6

Es funktioniert möglicherweise nicht auf localhost, wenn sich Ihre App in einem Unterordner befindet. Ich hatte tatsächlich das gleiche Problem.

Ich habe es online versucht und es hat wie erwartet funktioniert, indem ich Folgendes verwendet habe:

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

— FrancescoMussi
quelle

4

Die beste Antwort, die ich gefunden habe, war die Erweiterung des ui.router, da die Funktion nicht eingebaut ist. Das vollständige Detail finden Sie hier:

Erweitern des $ state.go des Angular 1.x UI-Routers

Hier ist jedoch meine kurze Erklärung, was zu tun ist. Fügen Sie dies zu app.js oder der eckigen App-Init-Datei hinzu:

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

In deinem Code

Sie werden in der Lage sein:

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

— Dalorzo
quelle

3

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

Dieser Code hat mein Problem gelöst.

Verwenden Sie dies in einem Ankertag.

— Zubair sadiq
quelle

2

Versuche dies!

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

— Miko
quelle

Dies ist irrelevant. Ich habe nicht gesagt, dass ich der von mir aufgerufenen Route Parameter hinzufügen muss. Ich habe gesagt, dass ich diese Route in einem neuen Tab öffnen möchte.

— Alex Arvanitidis

Dies kann für viele Menschen relevant sein. Ich habe das gerade benutzt. Eine Sache, die hier erwähnt werden muss, ist, dass der Parametername in einfachen Anführungszeichen stehen sollte. <a ui-sref="routeHere({'parameter': vm.parameter})" target="_blank"> </a>

— Sudheer Muhammed