Angular Fire：点击行而不是 href

Question

我使用了Bootstrap制作了一个页面，当用户单击行时，我希望出现一个操作。这很容易实现，我在行的

上放置了ng-click。

然而，在行元素内部，我有一个链接，我想避免在用户单击链接时触发ng-click（在这种情况下，它应该打开链接的URL）。

这是一张行的图片。基本上，如果用户单击除链接符号以外的任何地方，它应该触发ng-click；如果它单击链接符号，则应打开URL。

这是否可行？

PS：我尝试在除href元素之外的每个项目上放置ng-click，但是href元素位于其他内容的列中，如果我不在列上放置ng-click，则它将不会在用户单击列的空白区域时触发。

<div class="col-sm-8" >
   <a href="{{club.url}}" ><i class="fa fa-link"></i></a> |
   <span class="h5 small">{{club.description}}</span>
</div>

- EsseTi

---

你能在 JSFiddle 上分享吗？ - Kaushik Thanki

Answer 1

$event.stopPropagation() 在锚点标签的 ng-click 上使用以阻止事件冒泡。

标记

<div class="col-sm-8" ng-click="myMethod()">
    <a href="{{club.url}}" ng-click="$event.stopPropagation();"><i class="fa fa-link"></i></a> |
</div>

- Pankaj Parkar

---

$event.preventDefault(); 在容器上是否必要？ - aw04

这是我的错..它不是必需的..如果div被锚点包装，那就可以工作了。 - Pankaj Parkar

@EsseTi，很高兴能帮助到你。谢谢 :) - Pankaj Parkar

Answer 2

您需要阻止事件从锚点传播到其父级div，而该div具有单击事件处理程序。

<div class="col-sm-8" ng-click="onRowClick()">
   <a href="{{club.url}}" ng-click="onLinkClick($event)" ><i class="fa fa-link"></i></a> |
   <span class="h5 small">{{club.description}}</span>
</div>

JS

$scope.onLinkClick = function (e) {
  e.stopPropagation();
}

- ShankarSangoli

---

另一个回答“更短”，但这个也是正确的。但我选择了另一个。 - EsseTi

Answer 3

尝试在您的锚标签中添加ng-click="$event.stopPropagation();"。

<a href="{{club.url}}" ng-click="$event.stopPropagation();"><i class="fa fa-link"></i></a>

- aw04

---

你在()后面漏了一个逗号。 - EsseTi

为什么需要逗号？你是指分号吗？ - aw04