如何在AngularJS中同步复选框里面的切换按钮？

Question

我在按钮内有一个复选框：

<button ng-mousedown="active = !active">
    <input type="checkbox" ng-checked="active"/>
    Toggle!
</button>

单击该按钮可切换状态变量"active" 。 我想将复选框与"active"同步。 如果我宣布

ng-model="active",

只要在复选框外按下按钮，该框就与按钮同步。

问题是当单击复选框时，它会更改状态，但也会将click事件发送到按钮，因此两个事件都会触发，因此该框变得不同步：

http://jsbin.com/wepul/7/edit

使用ng-click而不是ng-mousedown时会恢复同步行为，但是，我更喜欢使用后者，因为它感觉响应更快（按钮反应更快）。

有没有（Angular）方式我可以保持盒子同步并保持ng-mousedown ？

Answer 1

如果在复选框周围使用<label>的默认行为而不是<button> ，则可以简化对额外事件处理的任何需求。 单击标签时，它将自动更改其中的任何单选按钮或复选框

  <label ng-class="{active: active1}" >
    <input type="checkbox" ng-model="active1"/>
    Change ng-checked!
  </label>

DEMO

Answer 2

尝试这个

  <button ng-class="{active: active1}" ng-mousedown="active1 = !active1">
    <input type="checkbox" ng-model="active1" ng-change="active1=!active1"/>