Ö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.

Neptun
quelle
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

Aaron
quelle
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';
}
Neptun
quelle
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';
Renat Gatin
quelle