gpt4 book ai didi

javascript - AngularJS : Scope value changing, 但并不总是应用 ng-class

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:59:17 26 4
gpt4 key购买 nike

我正致力于在 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 属性的标签,一切正常。

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

最烦人的不一致之一是当我看到变量发生变化但 ng 类没有触发并相应地发生变化(当单击标签时)。

编辑:通过应用更改了框,但多次点击仍然没有成功。

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

最佳答案

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

运行摘要循环

代码

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

Working Plunkr

关于javascript - AngularJS : Scope value changing, 但并不总是应用 ng-class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31171937/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com