[英]Transclude custom options inside directive with 'select' element
我有一個有點通用的指令,該指令包含一個選擇,該選擇帶有一組通過ajax加載(然后緩存)的選項。
事實是,我需要根據使用此指令的位置指定一些特定的選項。 我當時想我可以排除這樣的選擇:
<select-directive ng-model="model">
<option value="x">custom option</option>
</select-directive>
指令為:
{
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;
});
}
}
但是自定義選項不會顯示在select元素中。 我想念什么嗎? 這可能以某種方式出現嗎?
您可以這樣做:
link: function(scope, element, attrs, ctrls, transclude){
var html = transclude();
element.find('select').append(html);
}
顯然, ng-include
標記與angular的select
指令有某種沖突,所以我最終使用的解決方法是包括一個帶有ng-transclude
optgroup
屬性的optgroup
,幸運的是,它起作用了:
...
template:[
'<select class="tipos" ng-model="ngModel">',
'<optgroup ng-transclude></optgroup>',
'<optgroup>',
'<option ng-selected="::ngModel === item.tipo" ng-repeat="item in ::tiposDoc track by item.tipo" value="{{::item.tipo}}" title="{{::item.tipoydesc}}">',
'{{::item.tipoydesc}}',
'</option>',
'</optgroup>',
'</select>'
].join(''),
...
Maximus的回答也很好,但是我無法使某些功能與自定義選項一起使用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.