Переключить пользовательские параметры внутри директивы с элементом 'select'

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

Видимо ng-include теги конфликты каким-то образом с 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 тоже очень хорошо работал, но я не мог сделать какую-то функциональность работать вместе с пользовательскими параметрами.

Answer 2

Вы можете сделать это следующим образом:

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