Transclude定制选项与“选择”元素

Question

我有一个有点通用指令，包括在选择通过AJAX加载的一组选项（后来缓存）。

的事情是，我需要根据正在使用这个指令在哪里指定某些特定的选项。我想我可以transclude这样那样的选择：

<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; 
        }); 
      } 
     } 

但自定义选项不会在选择元素出现。我错过了什么吗？这是可能的以某种方式？

Answer 1

显然以某种方式与角度的select指令的ng-include标签冲突，所以我结束了使用的解决方法是包括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答案工作得很好，但我不能让一些功能与自定义选项一起工作。

Answer 2

你可以这样说：

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