Angular: 如何在没有弹出窗口阻止器的情况下打开新标签页

Question

Angular: 如何在没有弹出窗口阻止器的情况下打开新标签页

3

我想在$http调用后打开一个新标签页。目前，即使是在用户点击之后进行调用，弹出窗口阻止程序也不允许创建新标签页。

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

- Shyamal Parikh

2

是我太敏感了，还是让一个专门设计用于生成单页应用的框架打开新窗口很奇怪？ - Jeremy Thille

@JeremyThille 我正在将相关数据发布到新的选项卡/URL，以进行订阅处理。 - Shyamal Parikh

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rehmat Ali · Answer 1

尝试以下代码以打开新标签页并调用函数

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

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

       });
    };
}]);

- Pardeep Singh · 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代码：

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

- DefermentNL · Answer 3

您可以使用$window服务来实现此操作。$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 代码：

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