angularjs - 复选框中的 ng-change 被触发多次，因为 ng-click 超过了它

Question

由于代码比 1000 个单词更好，我创建了一个 plunker 来展示我的问题: http://bit.ly/1uiR2wy

考虑到特定的 DOM 元素，我有一个带有 ng-change 的输入复选框，我想向包裹它的 li 添加一个 ng-click 以便能够在整个区域中单击。 这个新的 ng-click 使 ng-change 中的方法发生两次。对于发生 3 次的 SPAN 描述 2 来说，情况更糟。

<li class="odd" ng-click="changeToggleModel($event)">
  <span class="overcomeDescription ellipsis-overflow">span description</span>
  <label>      
    <span>SPAN DESCRIPTION 2</span>
    <input type="checkbox" ng-change="toggleSelection($event)" ng-model="isSelected">
  </label>
</li>

我尝试过 stopPropagation ，但似乎并不能解决问题。 有什么想法吗？ 如果您检查 plunker 并打开控制台，您将完美地看到问题。

先谢谢大家了

Answer 1

您需要在标签级别停止事件传播。试试这个:

<label ng-click="$event.stopPropagation()" ...>

演示:http://plnkr.co/edit/AjD9GlA3zjxABix6hegg?p=preview

发生这种情况的原因是标签(连接到相应的复选框)有点生成一个点击事件，以便将点击传递给输入。此点击事件会导致所描述的奇怪问题，因为它仍然像正常事件一样冒泡(好吧，它是正常事件)，因此被 ngClick 指令检测到。