Öffnen Sie eine neue Registerkarte, indem Sie in AngularJS auf die Schaltfläche klicken


76
<button type="button" class="btn btn-primary" ng-click="openTab()">new tab</button>

openTab = function () {
  $http.post('www.google.com');
}

Was ich möchte, ist eine Anforderung zu posten und das Antwort-HTML in einem neuen Tab zu öffnen, wenn Sie auf die Schaltfläche "openTab" klicken. Es gibt keine Methode, um dies zu tun $http. Ich denke, das ist vielleicht einfach, aber ich kann keinen Weg finden.


Können Sie die Lösung akzeptieren? Meine Stimme ist für @Aaron eins :)
— Sampath

Antworten:


173

Sie können mit Hilfe des $ Fenster Dienst diese alle in Ihrem Controller tun hier . $ window ist ein Wrapper um das globale Browserobjektfenster.

Damit dies funktioniert, fügen Sie $ window wie folgt in Ihren Controller ein

.controller('exampleCtrl', ['$scope', '$window',
    function($scope, $window) {
        $scope.redirectToGoogle = function(){
            $window.open('https://www.google.com', '_blank');
        };
    }
]);

Dies funktioniert gut, wenn Sie zu dynamischen Routen umleiten


2
Chrome sperrt dieses Popup. Wie kann ich erkennen, dass es gesperrt ist, und den Benutzer darüber informieren?
— vp_arth

Es funktioniert gut in Chrome und Firefox, aber im IE werden Benutzer abgemeldet und zur Anmeldeseite umgeleitet. Es gibt einige Umgehungsmöglichkeiten, um das Problem für IE zu lösen
— Nitu Bansal

21

Ich habe diese Frage so gelöst.

<a class="btn btn-primary" target="_blank" ng-href="{{url}}" ng-mousedown="openTab()">newTab</a>

$scope.openTab = function() {
    $scope.url = 'www.google.com';
}

Dieser Trick ist hervorragend, insbesondere für jemanden, der sich mit dem Problem befasst, dass die Sicherheit von Chrome die neue Registerkarte sperren kann, die manuell per Skript geöffnet wird.
— Telvin Nguyen

7

Richtige HTML-Methode: Umgeben Sie einfach Ihre Schaltfläche mit einem Ankerelement und fügen Sie das Attribut target = "_ blank" hinzu . So einfach ist das:

<a ng-href="{{yourDynamicURL}}" target="_blank">
    <h1>Open me in new Tab</h1>
</a>

wo können Sie in der Steuerung einstellen:

$scope.yourDynamicURL = 'https://stackoverflow.com';

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.