在 link 内部禁用来自外部元素的 ng-click

Question

我有一个使用 ui-router 的站点，其中有一个 table 并且我在单元格上有一个 ng-click，但单元格内部有一个 link。单击 link 时，我需要禁用单元格中的 ng-click。

<div ng-click="click()" style="background: #d3d3d3">
  <a ui-sref="about">go to about page</a>
</div>

当我点击这个 link 时，我希望它转到关于页面，但不调用点击功能。这是一个 plnkr：http://plnkr.co/edit/kE9CZYcYu1OPA9S0K3Jk?p=preview

这与我的实际站点略有不同，但具有相同的行为（div 而不是 table）。我试过添加 ng-click="$event.preventDefault()" 但这也没有解决问题。

感谢任何帮助。谢谢！

Answer 1

你应该试试$event.stopProgation()

<div ng-click="click();" style="background: #d3d3d3">
  <a ui-sref="about" ng-click="$event.stopProgation()">go to about page</a>
</div>

不会将事件传播到那里 parents。

Answer 2

防止 <a> 标签上的事件冒泡到 div

<a ui-sref="about" ng-click="$event.stopPropagation()">go to about page</a>

另一种方法是在点击处理程序中检查点击目标

<div ng-click="click($event)">

JS

$scope.click = function(e){
   if( e.target.tagName ==='A'){
       return; // skip click event handler
   }
    // rest of click code
}

Disable ng-click from outside element on link inside