Here is the code snippet I am working with:
appForm.directive('inputRadio', function(){
return {
restrict: 'E',
link: function (scope, elem, attrs){
},
compile: function(elem, attrs){
return {
pre: function preLink( scope, elem, attrs ) {
},
post: function postLink( scope, elem, attrs ) {
}
}
},
template: '' +
'<div class="radio">' +
'<label class="required"><input type="radio" id="attrs.twigId" name="attrs.twigName" ng-model="optionMultipleChoice" ng-required="required" value="attrs.twigValue" >attrs.twigLabel</label> ' +
'</div>'
}
});
I'm trying to directly insert attributes with the variable " attrs " into the template, like id = " attrs.twigid ". However, I'm not sure if I should do this in the compile or link function...
Thank you!
Edit:
appForm.directive('inputRadio', function(){
return {
restrict: 'E',
link: function (scope, elem, attrs){
},
compile: function(elem, attrs){
return {
pre: function preLink( scope, elem, attrs ) {
scope.varstwig = attrs;
},
post: function postLink( scope, elem, attrs ) {
}
}
},
template: '' +
'<div class="radio">' +
'<label class="required"><input type="radio" id="[[ varstwig.twigid ]]" name="[[ varstwig.twigname ]]" ng-model="optionMultipleChoice" ng-required="required" value="[[ varstwig.twigvalue ]]" >[[ varstwig.twiglabel ]]</label> ' +
'</div>'
}
});
This code is functional, but there is a bug where the "scope" gets overwritten when multiple directives instances exist, causing them all to have the same values.
Is there a way to fix this issue?
The call looks like this:
{% block _test_optionsExpanded_widget %}
<div class="form-group">
<label class="control-label required">Options expanded</label>
<div id="test_optionsExpanded">
{% for option in form.children %}
<input_radio twigId="{{ option.vars.id }}" twigName="{{ option.vars.full_name }}" twigValue="{{ option.vars.value }}" twigLabel="{{ option.vars.label }}" twigShortName="{{ option.vars.name }}"></input_radio>
{% endfor %}
</div>
</div>
{% endblock %}