AngularJS：范围值改变，但并不总是适用于 ng-class

Posted 2023-03-06

【中文标题】AngularJS：范围值改变，但并不总是适用于 ng-class

【英文标题】：AngularJS : Scope value changing, but doesn't always apply ng-class

【发布时间】：2015-09-19 05:41:27

【问题描述】：

我正在努力在 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 属性的标签，一切都很好。

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

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

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

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

【问题讨论】：

无法复制。每次点击我都会看到两个日志，一个来自第 28 行，一个来自第 31 行，正如人们所期望的那样。在 Chrome 上的 plunker.com 中运行，打开开发工具以查看控制台。

抱歉，编辑速度很慢。找到部分解决方案，plunker 已更新。

【参考方案1】：

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

代码

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

Working Plunkr

【讨论】：

这将更新漂亮复选框的视觉效果，但它不能解决复选框每次单击都会来回更改多次的事实。 （打开控制台查看此行为）

谢谢！我完全忽略了，因为标签不是范围的一部分，它不会在没有应用的情况下更新。但是，是的，仍然对为什么要双击感到困惑。对此有什么想法吗？

其实我知道了原因，感谢您的解决方案。 div 被包裹在标签中。单击 div 会触发其单击以及标签单击事件。 $event 应该停止传播，但事实并非如此，这就是当前的问题。我稍微修改了 plunker 以显示修复（并清理它），但仍需要找出传播问题。

我想我得到了一个可能的修复，虽然不完全理解它为什么坏了：见编辑 2。

@RhoVisions 我会在晚上看看它