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

时间:2016-01-07 12:57:03

标签: javascript jquery angularjs

我想在new tab电话后打开$http。目前,即使通过用户点击进行调用,弹出窗口拦截器也不允许创建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

3 个答案:

答案 0 :(得分:1)

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

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

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

       });
    };
}]);

答案 1 :(得分:0)

你可以在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);
  };
});

答案 2 :(得分:-1)

您可以使用$ window服务执行此操作。 $ window是全局浏览器对象窗口的包装器。也许这也解决了你的答案: Open a new tab on button click in 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);
  };
});