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类更改为选中，当它不是时，它不是。输入为display: none;，一切看起来都不错。当我设计它时，我将其设置为使用带有for属性的label，并且一切正常。

然后我记得你也可以用标签包装输入，点击该标签应该触发输入。我在上面测试了我的代码，它变成了超级越野车。我看到了我设置的范围监视和控制台日志，看到变量在div复选框上每次单击都会触发3次，单击标签时会触发两次，并且每次中的一次都不会实际更改值。没有意义。我现在在调整它之间，我不知道什么是真正的问题，也不知道如何解决它。我希望我能得到一些建议。我用代码http://plnkr.co/edit/OVzSUhqnLDpvtuiRh2sM?p=preview创建了plunker。请注意，plunker确实会制作一堆控制台日志。

最烦人的不一致之一是当我看到变量变化但ng-class没有触发并相应地改变时（点击标签时）。

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

编辑2：我试图修改它以获得关于双击的更多答案，最后调整它并清理它。我有点理解为什么单击第二个场景中的复选框（包装标签）最后点击3次：点击它也点击了包装标签，但仍然只有2次点击。 Donno＃3来自哪里，但我的解决方案似乎有效。这是一个新的plunkr： http://plnkr.co/edit/vvIDSHshvsq1akvFpdUc?p=preview

Answer 1

当您从click事件DOM更新范围变量时，您需要通过运行摘要周期告诉angular更新绑定。目前，在您的情况下，您正在操作label.click事件的范围绑定，因此您需要使用scope.$apply()

来运行摘要周期

<强>代码

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

Working Plunkr

AngularJS：范围值更改，但并不总是应用ng-class

1 个答案: