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