Href 覆盖 Angularjs 中的父 ng-click答案

【问题标题】：Href override parent ng-click in AngularjsHref 覆盖 Angularjs 中的父 ng-click
【发布时间】：2016-05-20 09:47:19
【问题描述】：

我知道有很多关于覆盖 href 或 ng-click 的问题，但我的问题不同。我有一些这样的html代码：

<tr ng-click="doSomething()">
  <complicated html>
    <a href="http://somelink">blablabla</a>
  </complicated html>
</tr>

如果可能的话，我想要什么：当用户点击链接时，不会触发 ng-click，用户只会转到链接。

有可能这样做吗？ stackoverflow 上的其他问题询问同一标签中的 ng-click 和 href，但事实并非如此。

谢谢！

【问题讨论】：

也许有一个解决方案，但无论如何，将 ng-click 绑定到与其他点击不冲突的东西会很聪明。
@Holle 阅读我对 Sandeep 的评论以了解原因；）

标签： javascript html angularjs

【解决方案1】：

我不确定你的 doSomething() 函数是什么，即。你在那里做什么，但这可能是你的解决方案。

$scope.doSomething = function(event) {
  if (event.target.nodeName === 'A' || event.target.tagName === 'A') {
    console.log('target was <a>');
  } else {
    console.log('target was not <a> - do something');
  }
};

HTML：

<table>
  <tr ng-click="doSomething($event)">
    <td><a href="http://google.com" target="_blank">blablabla</a></td>
  </tr>
</table>

所以你检查点击的元素是否是一个锚链接，并根据它做一些事情。显然，您可以使它适应许多不同的情况。

编辑：

你可以阅读tagname vs nodename 并决定你想怎么做。

【讨论】：

非常感谢！它完全按照我的预期工作:) 事实上，doSomething 打开了我想用 ng-click 打开的相同链接，但 ng-click 阻止用户使用中键单击和右键单击。因此，当用户单击该行时，它会打开链接。当它点击实际链接时，它会执行用户想要的操作（在新选项卡/窗口中，或者只是通过右键单击获取链接）。我希望我很清楚:)
好的，我明白了。很高兴听到我能帮助你:)

【解决方案2】：

thepio 的解决方案有效。但是，如果您不想更改 doSomething 函数，则可以使用另一种方法：

<tr ng-click="doSomething()">
  <complicated html>
    <a href="" ng-click="navigateToSomeLink($event)">blablabla</a>
  </complicated html>
</tr>

在控制器中，添加另一个函数navigateToSomeLink()

$scope.navigateToSomeLink = function($event) {
  $event.stopPropagation();    
  $window.open('http://somelink', '_blank');
}

【讨论】：

感谢您的解决方案！这就是我首先尝试的，但我“需要”使用 href 链接而不是 javascript 链接（这是我的 doSomething 正在做的事情），因为我希望用户能够执行自定义操作（在新选项卡中打开ctrl + 单击或中键单击等）。当用户单击行中的其他位置时，ng-click 是一种后备（没有自定义操作）。再次感谢您！