绑定点击事件以在新标签页中打开链接答案

【问题标题】：Bind click event to open a link in new tab绑定点击事件以在新标签页中打开链接
【发布时间】：2017-01-03 06:22:54
【问题描述】：

我正在尝试使模式中的所有链接在新选项卡中打开，并且由于使用角度的限制，操作 DOM 并不像我想象的那么容易。有没有办法将点击事件绑定到链接，然后使该点击事件打开一个新选项卡？

我有这样的事情

w = angular.element($window)
w.bind 'click', (e) ->
  # if link clicked open link in new tab?

【问题讨论】：

我想这不是有角度的人可以做到这一点。您可以使用 HTML 属性来解决此问题。默认情况下，在您的锚标记中使用 target="_blank"。所有标签都将在新标签中打开。

标签： angularjs dom coffeescript

【解决方案1】：

基本规则是，如果你要对 DOM 做任何事情，那么你应该有一个指令并在链接函数中使用普通的 JQuery

new-tab.directive.coffee

angular.module 'my.module'
  .directive 'newTab', ($window) ->
    restrict: 'A'
    link: (scope, element, attributes) ->
      element.on('click', (evt)->
        # Open link in new tab here
      )

示例用法：

<a href='/your/link' new-tab>

您可能还必须做一些“防止默认”的事情，以便链接不会仍然转到当前窗口中的同一页面（现在我考虑了一下）。

您也可以尝试在任何和所有节点上设置 _target='blank' 属性。

我没有测试过这个

new-tab-a.directive.coffee

angular.module 'my.module'
  .directive 'a', -> #I doubt this is a good idea though using 'a' as a directive name.
    restrict: 'E'
    link: (scope, element, attributes) ->
      attributes.target = '_blank'

【讨论】：

【解决方案2】：

你不能只对每个链接使用 ng-click 吗？

<a href="#" ng-click="openLink('http://www.google.com')">Open link in new window</a>

在你的控制器里有这样的东西：

$scope.openLink = (link) ->
  window.open link
  return

或者只使用 html：

<a href="http://www.google.com" target="_blank">Open link in new window</a>

【讨论】：

只是写同样的东西。为什么要重新发明轮子？
因为您将 DOM 绑定到控制器，每个控制器都必须具有此方法或依赖范围继承来提供它，这通常表明需要指令。我喜欢简单的 target='_blank' 它简单且有效！