I am having issues with using ng-checked to automatically check a checkbox when a modal loads under certain conditions. Despite the item being checked, the condition if (item.checked) returns false.
Below is the directive I am working with.
app.directive('toggleButtons', [function() {
return {
link: function(scope, element) {
var toggleButtons = element.find('.input-add-checkbox');
function checkState() {
Array.prototype.forEach.call(toggleButtons, function(each) {
if (each.checked)
each.parentNode.style.backgroundColor = "#00E0AA";
else if (!each.checked)
each.parentNode.style.backgroundColor = "transparent";
});
}
Array.prototype.forEach.call(toggleButtons, function(each) {
each.addEventListener('click', function() {
checkState();
});
});
checkState();
}
}
}])
My HTML code looks like this:
<label for="listen" type="button" class="type-toggle btn btn-green">
<input type="radio" id="listen" name="type" value="listen" ng-checked="{{ currentState == 'app.listen' }}" ng-model="contentParams.type" class="input-add-checkbox" />
<span class="glyphicon glyphicon-headphones"></span>
</label>
Despite the item being checked, the style defined in the JavaScript is not properly applied when the template containing the directive is loaded, possibly due to it being within an AngularUI modal. Even using a timeout has not resolved the issue.
Here is where and how I implement the directive.