There is a custom directive called "radio" that I am using:
.directive("radio", function () {
return {
restrict: "EA",
replace: true,
scope: { text: "@", name: "@", value: "&" },
template: '<label class="radio" for="{{name}}">\
<span class="icons">\
<span class="first-icon fui-radio-unchecked"></span>\
<span class="second-icon fui-radio-checked"></span>\
</span>\
<input type="radio" id="{{name}}" name="{{name}}" value="{{value}}" ng-model="value" />\
<span ng-bind="text"></span>\
</label>',
link: function (scope, el) {
scope.value = false;
scope.$watch("value", function (value) {
value ? el.addClass("checked") : el.removeClass("checked");
});
}
};
})
Currently, it is being used like this:
<radio name="test" value="testvalue"></radio>
I wish to simplify the process and have the ability to add attributes directly in the HTML instead of defining them in the directive code, such as:
<radio id="{{name}}" name="{{name}}" value="{{value}}" ng-model="value" required></radio>
The desired resulting HTML structure would look like this:
<label class="radio" for="{{name}}">
<span class="icons">
<span class="first-icon fui-radio-unchecked"></span>
<span class="second-icon fui-radio-checked"></span>
</span>
<input type="radio" id="{{name}}" name="{{name}}" value="{{value}}" ng-model="value" required />
<span ng-bind="text"></span>
</label>