Jquery Transclude不适用于带有ng选项的select

我发现了一篇关于设计定制选择框的很酷的文章。 我决定将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
      }
    };
  });

angular.module（'App'）
.指令（'customSelect'，函数（）{
返回{
模板：“”+
'' +
'' +
'',
是的，
限制：“A”，
优先权：1000，
链接：函数postLink（范围、元素、属性）{
//通过
}
};
});

html:

但出于某些原因，它什么也做不了

---

找到了github问题，它谈到了相同的主题，但在这里并没有真正解决我的问题。

是否需要在同一元素中包含select和ng选项？我猜ng选项设置为“terminal:true”，很像ng repeat。尝试将选项嵌套在单独的div中

---

我想我是说ngOptions指令定义中可能有什么东西导致自定义选择出现问题，所以请尝试在angular.js中调试它，或者编写一个自定义选项指令。如果在指令定义中将数组传递给compile函数，则可能会在一段“option”html中循环复制数组。这与ngRepeat的工作原理类似。

因此，您的意思基本上是，我不能使用ngOptions指令，需要以不符合W3C的方式对重复的选项进行破解以使其工作？var ngOptions指令=valueFn（{terminal:true}）；第21475行，angular.js 1.2.4

<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>