Transclude не работает при выборе с ng-опциями

Question

Я нашел this классную статью о создании пользовательских полей выбора. я решил обернуть функцию JQuery в директиве:

angular.module('App') 
    .directive('customSelect', function() { 
    return { 
     template: '<span class="select-wrapper">' + 
      '<div ng-transclude></div>' + 
      '</span>' + 
     '<span class="holder"></span>', 
     transclude: true, 
     restrict: 'A', 
     priority: 1000, 
     link: function postLink(scope, element, attrs) { 
      //pass 
     } 
    }; 
    }); 

HTML:

<div class="col-lg-12 left"> 
    <select custom-select ng-options="productGroups.indexOf(product) + '' as product.name for product in productGroups" ng-model="userData.pg"></select> 
</div> 

, но по некоторым причинам он просто не делает ничего

нашел this GitHub вопрос, что говорит о той же теме, но на самом деле не затрагивает мою проблему здесь.

Answer 1

Вам нужно иметь опции выбора и ng в одном и том же элементе? Я бы предположил, что ng-options задано «terminal: true», как ng-repeat. Попробуйте вложить опции в отдельный div.

Я думаю, что, возможно, что-то есть в определении директивы ngOptions, вызывающем проблему с вашим пользовательским выбором, чтобы либо попытаться отладить это в angular.js, либо написать директиву настраиваемых опций. Если вы передали массив функции компиляции в определение своей директивы, вы, вероятно, могли бы прокручивать массив, дублирующийся внутри фрагмента «option» html. Это похоже на то, как работает ngRepeat.