使用AngularJS在新窗口中打开链接

Question

有没有一种方法可以告诉AngularJS，当用户点击链接时，我希望在新窗口中打开它们？

使用jQuery，我会这样做：

jQuery("a.openInNewWindow").click( function() {
    window.open(this.href);
    return false;
})

AngularJS有相应的等价物吗？

- KevSheedy

Answer 1

以下是指令的代码，它将在所有带有 href 属性的 <a> 标签中添加 target="_blank"。这意味着它们都将在新窗口中打开。请记住，指令在 Angular 中用于任何 dom 操作/行为。演示（点击）。

app.directive('href', function() {
  return {
    compile: function(element) {
      element.attr('target', '_blank');
    }
  };
});

这里是同样的概念，更少的侵入性（因此不会影响所有链接）和更加适应性。您可以在父元素上使用它来影响所有子链接。实时演示（点击）。

app.directive('targetBlank', function() {
  return {
    compile: function(element) {
      var elems = (element.prop("tagName") === 'A') ? element : element.find('a');
      elems.attr("target", "_blank");
    }
  };
});

旧回答

看起来你只需要在你的 <a> 标签上使用 "target="_blank"。以下是两种方法：

<a href="//facebook.com" target="_blank">Facebook</a>
<button ng-click="foo()">Facebook</button>

JavaScript：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $window) {
  $scope.foo = function() {
    $window.open('//facebook.com');
  };
});

点击这里查看实时演示

这里是$window的文档：http://docs.angularjs.org/api/ng.$window

你可以直接使用window，但最好使用依赖注入，在测试时传入angular的$window。

- m59

---

有没有办法让这个在使用 ng-bind-html 插入的 HTML 中工作？ - axelav

我不确定。我的猜测是为了安全起见，在ng-bind-html中指令不起作用。 - m59

$timeout(function() { $('.content a').attr('target', '_blank') }, 0) - axelav

如果你想将这个与$http的promise联系起来，该怎么办呢？ - Snekse

@Snekse，你的问题不够具体，但听起来像是需要使用ui-router。 - m59

Answer 2

这对我有用。 在你的控制器中注入$window服务。

$window.open("somepath/", "_blank")

- Filipp Gaponenko

---

这就是我一直在寻找的 Angular 方式。 :) - Karthik RP

Answer 3

你可以使用：

$window.open(url, windowName, attributes);

- Sam

---

虽然您像Angular期望的那样使用$window，但这个答案实际上并没有包括如何绑定的内容，这是ops问题的一部分（它没有展示如何将jQuery(..)思想转换为ng）。 - electblake

Answer 4

这是你的按钮代码

<a href="AddNewUserAdmin" 
   class="btn btn-info " 
   ng-click="showaddnewuserpage()">
  <span class="glyphicon glyphicon-plus-sign"></span> Add User</a>

在控制器中添加此函数即可。

 var app = angular.module('userAPP', []);

app.controller('useraddcontroller', function ($scope, $http, $window) {

$scope.showaddnewuserpage = function () {

    $window.location.href = ('/AddNewUserAdmin');
}

});

- nur farazi

Answer 5

@m59指令适用于ng-bind-html，你只需要等待$viewContentLoaded完成即可。

app.directive('targetBlank', function($timeout) {
  return function($scope, element) {
    $scope.initializeTarget = function() {
      return $scope.$on('$viewContentLoaded', $timeout(function() {
        var elems;
        elems = element.prop('tagName') === 'A' ? element : element.find('a');
        elems.attr('target', '_blank');
      }));
    };
    return $scope.initializeTarget();

  };
});

- Alex Daro

Answer 6

我写了一个小贴士，我认为它对任何寻求解决该问题的人都非常有帮助: external link 它的作用是将 target="_blank" 属性添加到锚元素，以链接到与当前域不同的域。 您可以根据需要进行修改。

- idan

Answer 7

我查看了很多链接，但这个答案帮助了我很多： $scope.redirectPage = function (data) { $window.open(data, "popup", "width=1000,height=700,left=300,top=200"); };

** data将是您正在访问的绝对URL。

- Anuj