I am facing a challenge with a directive that involves a select element populated with options loaded and cached through ajax.
The issue arises when I need to display specific options based on the context in which this directive is used. My initial idea was to dynamically include these extra options using transclusion:
<select-directive ng-model="model">
<option value="x">custom option</option>
</select-directive>
The directive structure would be as follows:
{
restrict: 'E',
scope:{
ngModel: '='
},
transclude:true,
template:[
'<select class="tipos" ng-model="ngModel">',
'<ng-transclude></ng-transclude>',
'<option ng-selected="ngModel === item.tipo" ng-repeat="item in ::tiposDoc track by item.tipo" value="{{::item.tipo}}" title="longer description">',
'description',
'</option>',
'</select>'
].join(''),
link: function(scope){
$http.get('viewApp/viewCtrl.php/getTipos',{cache:true})
.then(function(response){
var resp = response.data;
if(!resp.success){
console.log(resp.log);
alert(res.msg);
return false;
}
scope.tiposDoc = resp.result;
});
}
}
However, the custom options are not being displayed within the select element. Am I overlooking something? Is there a workaround for achieving this customization?