Відкрийте нову вкладку за натисканням кнопки в AngularJS


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

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

Що я хочу, це опублікувати вимога та відкрити html відповіді на новій вкладці, коли ви натискаєте кнопку "openTab". Для цього немає методу $http. Я думаю, що це може бути просто, але я не можу знайти спосіб.


Чи можете ви прийняти рішення? Я голосую за @Aaron one :)
Сампат

Відповіді:


173

Ви можете зробити все це у своєму контролері за допомогою служби $ window тут . $ window - це оболонка навколо глобального вікна об'єкта браузера.

Щоб зробити цю роботу, вставте $ вікно у ваш контролер наступним чином

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

це добре працює при перенаправленні на динамічні маршрути


2
Chrome блокує це спливаюче вікно .. Як я можу розпізнати його заблокованим та повідомити про це користувача?
vp_arth

він працює нормально в chrome і firefox, але в IE користувач виходить з системи і перенаправляється на сторінку входу. є деякі завдання для вирішення проблеми для IE
Nitu Bansal

21

Я вирішив це питання таким чином.

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

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

Цей фокус чудовий, особливо для тих, хто стикається з проблемою, через яку безпека Chrome може заблокувати сторінку нової вкладки, яка відкривається сценарієм вручну.
Тельвін Нгуєн,

7

Правильний спосіб HTML: просто оточіть вашу кнопку прикріплюючим елементом і додайте атрибут target = "_ blank" . Це так просто:

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

де ви можете встановити в контролері:

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.