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


70

有没有办法告诉AngularJS,我希望用户单击链接时在新窗口中打开它们?

使用jQuery,我可以这样做:

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

AngularJS是否具有等效功能?

Answers:


76

这是一条指令,它将添加target="_blank"<a>具有href属性的所有标签中。这意味着它们都将在新窗口中打开。请记住,指令在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");
    }
  };
});

旧答案

似乎您只需要"target="_blank"<a>标签上使用。这里有两种方法:

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

现场演示在这里(单击)。

以下是docs $windowhttp : //docs.angularjs.org/api/ng.$window

您可以只使用window,但是最好使用依赖项注入,并$window出于测试目的传入angular 。


1
有什么办法可以使它在使用插入的html上工作ng-bind-html
axelav 2014年

我不确定。我的猜测是,出于安全目的,这些指令在ng-bind-html中不起作用。
2014年

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

如果您想$http兑现承诺?
Snekse14年

@Snekse您的问题还不够具体,无法回答,但这听起来像是您应该使用的东西ui-router
2014年


37

您可以使用:

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

2
尽管您使用$ window就像angular期望一样,但这个答案实际上并不包括如何绑定,这是操作问题的一部分(它没有显示如何将jQuery(..)思维转换为ng。
lectblake

11

这是您按钮的代码

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

});

4

@ 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();

  };
});

1

我写了一个小要点,我认为这对寻求解决该问题的任何人都非常有帮助:外部链接

它的作用是target="_blank"为锚定元素添加属性,这些元素将链接到与当前域不同的域。您可以将其修补为您认为合适的任何东西。


1

我经历了很多链接,但是这个答案对我有很多帮助:

$scope.redirectPage = function (data) { $window.open(data, "popup", "width=1000,height=700,left=300,top=200"); };

**数据将是您要命中的绝对URL。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.