Angular：打开没有弹出窗口阻止程序的新选项卡

Question

我想在$http调用后打开一个new tab 。 目前，即使通过用户点击进行调用，弹出窗口阻止程序也不允许创建new tab 。

HTML：

<div ng-controller="ExampleController">
      <button ng-click="openNewTab()">Open new tab</button>
</div>

调节器

.controller('ExampleController', ['$scope','$http', function($scope,$http) {

   $scope.openNewTab = function(e) {
       $http.get("test.com").finally(()=>{
         window.open();

       });
    };
}]);

Plunker

Answer 1

尝试使用此代码打开新选项卡调用该函数

.controller('ExampleController', ['$scope','$http', function($scope,$http,$window) {

   $scope.openNewTab = function(e) {
       $http.get("test.com").finally(()=>{
        $window.open('url','_blank');

       });
    };
}]);

Answer 2

您可以在ajax调用中使用setInterval，您必须一次又一次地检查您的变量，当条件匹配时，将在ajax调用中设置该变量，然后您可以打开新选项卡。

我也找到了一个解决方法。

<!DOCTYPE html>
<html ng-app="Demo">
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
    <script data-require="jquery@2.0.1" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
    <script src="https://code.angularjs.org/1.3.0-beta.9/angular.js"></script>
    <script src="demo.js"></script>
  </head>

  <body ng-controller="DemoCtrl">
    <button ng-click="doesntWork()">This Doesn't Work</button>
  </body>

</html>

和角度代码：

angular.module("Demo", []).controller("DemoCtrl", function($scope, $http) {
  $scope.doesntWork = function() {
 var isSuccess=0;
    $http.get('https://api.github.com/users/angular').then(function (result) 
  {       
    isSuccess=1;
  });
 var timer = setInterval(function () {
        if (isSuccess!= 0) {
            clearInterval(timer);
        }
        if (isSuccess== 1) {
            var newWin = $window.open('', '_blank');
            newWin.location = "https://www.google.co.in";
        }
    },1000);
  };
});

Answer 3

您可以使用$ window服务执行此操作。 $ window是全局浏览器对象窗口的包装器。 也许这也解决了你的答案：在AngularJS中点击按钮时打开一个新选项卡

我也找到了一个解决方法。

<!DOCTYPE html>
<html ng-app="Demo">
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
    <script data-require="jquery@2.0.1" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
    <script src="https://code.angularjs.org/1.3.0-beta.9/angular.js"></script>
    <script src="demo.js"></script>
  </head>

  <body ng-controller="DemoCtrl">
    <button id="test" ng-click="works()">This Works</button>
    <button ng-click="doesntWork()">This Doesn't Work</button>
  </body>

</html>

和角度代码：

angular.module("Demo", []).controller("DemoCtrl", function($scope, $http) {
  function openInNewTab() {
    var uri = 'http://www.google.nl';
    var link = angular.element('<a href="' + uri + '" target="_blank"></a>');

    angular.element(document.body).append(link);

    link[0].click();
    link.remove();
  };

  $("#test").click(function(){
    openInNewTab();
  });

  $("#test").click();

  $scope.works = openInNewTab;

  $scope.doesntWork = function() {
    $http.get('https://api.github.com/users/angular').then(openInNewTab);
  };
});

Angular：打开没有弹出窗口阻止程序的新选项卡

问题描述

3 个解决方案

解决方案1
1 2018-02-28 09:47:18

解决方案2
0 2018-03-13 12:37:37

解决方案3
-1 2016-01-07 13:13:39

Angular：打开没有弹出窗口阻止程序的新选项卡

问题描述

3 个解决方案

解决方案1 1 2018-02-28 09:47:18

解决方案2 0 2018-03-13 12:37:37

解决方案3 -1 2016-01-07 13:13:39

解决方案1
1 2018-02-28 09:47:18

解决方案2
0 2018-03-13 12:37:37

解决方案3
-1 2016-01-07 13:13:39