AngularJS: 作用域值改变，但不总是应用ng-class

Question

我在研究如何在Angular中创建“漂亮”的复选框和单选框。我已经使用jQuery开发了类似的插件，但是在Angular版本中遇到了问题，特别是对于复选框部分。

我创建了一个指令（prettyCheckbox），其模板是一个包装复选框输入的div：

<div class="prettyCheckbox" ng-click="toggleCB($event)" ng-class="{ 'checked': checkbox }">
    <input id="{{inputID}}" type="checkbox" ng-model="checkbox">
</div>

如您所见，模型值被检查后，将div类更改为checked。当它不是时，它就不是。输入被赋予display: none;，看起来一切都很好。当我设计它时，我设置它与带有for属性的标签一起工作，一切都还好。

然后我想起来，您还可以使用标签包装输入，点击该标签应触发输入。我在其上测试了我的代码，它变得非常错误。我看到了范围监视和控制台日志，我已经设置好了，以查看每个单击div-checkbox时触发3次变量，并且在单击标签时触发两次，而其中每次都不会实际更改值。这毫无意义。我一直在调整它一段时间了，但我不知道真正的问题是什么，也不知道如何解决它。我希望我能得到一些建议。我已经创建了一个包含代码的plunker：http://plnkr.co/edit/OVzSUhqnLDpvtuiRh2sM?p=preview。请注意，plunker确实会产生许多控制台日志。

最令人恼火的不一致性之一是当我看到变量更改但ng-class不会触发并相应更改（单击标签时）。

编辑：通过apply使框改变，但多次点击仍然没有运气。

编辑2：我尝试修改它以获得有关双击的更多答案，最终进行了微调，并将其清理干净。我有点明白为什么在第二种情况下（包装标签）单击复选框会导致单击3次：单击它也单击了包装标签，但这仍然只有2次单击。我不知道第三个来自哪里，但我的解决方案似乎有效。这是一个新的plunkr：http://plnkr.co/edit/vvIDSHshvsq1akvFpdUc?p=preview

- Rohit

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Ed Staub

抱歉，编辑有些慢。找到部分解决方案，plunker已更新。 - Rohit

Answer 1

作为你从点击事件DOM更新作用域变量的内容，你需要告诉Angular通过运行digest周期来更新绑定。当前在你的情况下，在label.click事件上操作作用域绑定，所以在其中需要使用scope.$apply() 运行digest周期。 代码

label.click(function() {
   scope.toggleCB();
   scope.$apply()
});

Working Plunkr

- Pankaj Parkar

---

这将更新漂亮复选框的视觉效果，但它并不能解决每次点击时复选框来回多次更改的问题。（打开控制台查看此行为） - Nicholas Thomson

谢谢！我完全忽略了标签不在范围内，没有应用就不会更新。但是，为什么它会双击，我还是有点困惑。你有什么想法吗？ - Rohit

实际上，我通过您的解决方案找到了问题所在。该div被包裹在label中。单击div会触发其点击事件以及标签的点击事件。$event 应该阻止冒泡，但它没有，这就是问题所在。我稍微修改了 plunker 以显示修复程序（并将其清理），但仍需要解决传播问题。 - Rohit

我认为我找到了一个可能的解决方法，尽管不完全理解为什么会出现问题：请参见编辑2。 - Rohit

@RhoVisions 我会在晚上看一下。 - Pankaj Parkar