Currently, I am in the process of developing aesthetically pleasing checkboxes and radio boxes using Angular. Despite having success with similar plugins created in jQuery, I am encountering difficulties with the Angular versions, specifically focusing on the checkbox.
My approach involved creating a directive (prettyCheckbox) where its template consists of a div encapsulating a checkbox input:
<div class="prettyCheckbox" ng-click="toggleCB($event)" ng-class="{ 'checked': checkbox }">
<input id="{{inputID}}" type="checkbox" ng-model="checkbox">
</div>
As depicted, when the model value is checked, it triggers a change in the div's class to 'checked'; otherwise, it remains unchecked. The input's visibility is set to display: none;, presenting a clean appearance. Initially, everything seemed to function correctly when used with labels featuring the 'for' attribute.
However, upon realizing that an input can also be enclosed within a label, triggering the input by clicking the label led to unforeseen complications. Monitoring the scope transitions and console logs revealed that the variable was being triggered three times for each click on the div-checkbox and twice when clicking the labels, with some instances failing to alter the value as expected—an perplexing issue. Following numerous adjustments without resolving the underlying problem, I am seeking advice from the community. A Plunker showcasing the code has been prepared: http://plnkr.co/edit/OVzSUhqnLDpvtuiRh2sM?p=preview. Note that the Plunker generates various console logs.
One of the most frustrating inconsistencies encountered occurs when witnessing the variable change but the ng-class fails to update accordingly, especially when clicking on the label.
UPDATE: Managed to implement box changes through 'apply', yet struggles persist regarding multiple clicks.
UPDATE 2: In an attempt to solicit more insights into the double-click dilemma, further modifications were made to refine and simplify the code. Although I grasped why the checkbox clicked thrice in the second scenario (label-wrapped), attributing one click to activating the wrapping label—two clicks total—I remain puzzled by the third instance. Nonetheless, my adjusted solution appears to address the issue effectively. Access an updated Plunkr here: http://plnkr.co/edit/vvIDSHshvsq1akvFpdUc?p=preview