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

由于代码比 1000 个单词更好，我创建了一个 plunker 来展示我的问题：http://bit.ly/1uiR2wy 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 并打开控制台，您将完美地看到问题。

预先感谢大家

您需要停止事件传播label等级。尝试这个：

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

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

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