Geek Answers Handbook

AngularJS: changing scope value, but ng-class is not always applied

I am working on creating “good” flags and radio windows in Angular. I have similar plugins developed in jQuery, but I am having problems with versions of Angular, in particular the checkbox.

What I did was create a directive (prettyCheckbox), and its template is a div that includes a checkbox:

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

As you can see, the model value is checked, it changes the div class to checked, when it is not there, it is not. The input is set as display: none;, and everything looks good. When I developed it, I configured it to work with a label with the attribute "Attribute", and everything was in order.

Then I remembered that you can also wrap the input with a shortcut, and clicking on this label should initiate the input. I tested my code on it and it became super-buggy. I saw that in the watch and console logs that I set to run this variable three times for each click on the div checkbox, and twice when I clicked the shortcuts, and one of these times would not actually change the value, It didn’t make sense. I already set it up a bit, and I have no idea what this real problem is, and how to solve it. I hope I can get some advice. I created a plunker with the code: http://plnkr.co/edit/OVzSUhqnLDpvtuiRh2sM?p=preview . Note that plunker does a bunch of console logs.

- , ng- ( ).

: , .

EDIT 2: , , . , ( ) 3 : , 2 . , № 3, , , . plunkr: http://plnkr.co/edit/vvIDSHshvsq1akvFpdUc?p=preview

+4
1

DOM click, angular digest. label.click, , scope.$apply()

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

Plunkr

+3

More articles:


All Articles