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

有没有办法告诉AngularJS,当用户点击链接时,我想要在新窗口中打开链接?

用jQuery我会这样做:

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

有没有与AngularJS的等价物?

这里有一个指令,将所有具有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 ,但最好使用dependency injection,传入angular度的$window进行testing。

您可以使用:

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

它适用于我。 将$window服务注入到您的控制器中。

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

这是你的button的代码

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

在控制器中只需添加这个function。

  var app = angular.module('userAPP', []); app.controller('useraddcontroller', function ($scope, $http, $window) { $scope.showaddnewuserpage = function () { $window.location.href = ('/AddNewUserAdmin'); } }); 

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

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

它所做的是将target="_blank"属性添加到链接到与当前域不同的域的锚点元素。 你可以把它修补到你认为合适的地方。