ng-options 在选择中复制选项

Question

我使用 ng-options 选择与列表绑定的元素。我有一个自定义指令，它将验证指令添加到选择元素。此自定义指令编译 select 元素。编译选择元素后，选项被复制。有没有办法在至少编译之前停止重复或清除它们？

在下面的代码中，元数据是一个自定义指令。在该指令中，我有 compile($el)($scope) 行。执行完这一行后，select变成如下图

请选择性别
男
女
男
女性

function ($scope, $el, $attr, $ngModel) {

    if (!$ngModel) {
        return;
    }

    var elementMetadata = JSON.parse($attr.metadata);

    angular.forEach(elementMetadata.validators,
        function (item) {
            $el.attr(item.name, item.value);
        });

    $el.removeAttr('metadata');
    $compile($el)($scope);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<select name="gender" id="lstGender" ng-options="gender for gender in genderList track by gender" ng-model="fields.gender" metadata="{{template.gender}}">
   <option value="">Please select gender</option>
</select>

Answer 1

使用post将编译选择元素移动到编译执行的最后一个函数

          pre: function(scope, element) {
            scope.values =  [ 'male', 'female' ];
          },
          post: function() {
            $compile(tElement)(scope);
          }

codepen-https://codepen.io/nagasai/pen/MQQLbB