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

时间:2013-11-20 15:18:02

标签: javascript angularjs

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

使用jQuery我会这样做:

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

是否与AngularJS等效?

7 个答案:

答案 0 :(得分:76)

这是一个指令,会将target="_blank"添加到具有<a>属性的所有href代码中。这意味着他们将在一个新窗口中打开。请记住,Angular中的指令用于任何dom操作/行为。的 Live demo (click).

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

这是相同的概念,具有较小的侵入性(因此它不会影响所有链接)并且更具适应性。您可以在父元素上使用它以使其影响所有子链接。的 Live demo (click).

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

Live demo here (click).

以下是$window的文档:http://docs.angularjs.org/api/ng.$window

你可以使用window,但最好使用依赖注入,传入angular $window进行测试。

答案 1 :(得分:43)

它对我有用。 将$window服务注入您的控制器。

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

答案 2 :(得分:36)

你可以使用:

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

答案 3 :(得分:10)

这是按钮的代码

<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 :(得分: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();

  };
});

答案 5 :(得分:1)

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

它的作用是将target="_blank"属性添加到锚点元素,这些元素将链接到与当前域不同的域。 您可以根据自己认为合适的方式进行修补。

答案 6 :(得分:0)

我已经通过了许多链接,但这个答案对我有很多帮助:

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

**数据将是您正在击中的绝对网址。