使用 'select' 元素在指令中嵌入自定义选项

Question

我有一个有点通用的指令，它包含一个 select 和一组通过 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 元素中。我错过了什么吗？这有可能吗？

Answer 1

你可以这样做：

link: function(scope, element, attrs, ctrls, transclude){
    var html = transclude();
    element.find('select').append(html);
}

Answer 2

显然 ng-include 标签在某种程度上与 angular 的 select 指令冲突，所以我最终使用的解决方法是包含一个 optgroup 和 ng-transclude 属性，幸运的是它起作用了：

...
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 的回答也很有效，但我无法使某些功能与自定义选项一起使用。

使用 'select' 元素在指令中嵌入自定义选项

Transclude custom options inside directive with 'select' element

javascript

angularjs

angularjs-ng-transclude