ngOptions在自定义指令中应用了两次

ngOptions applied twice in custom directive

本文关键字：两次 应用 自定义 指令 ngOptions      更新时间：2023-09-26

我正在创建一个指令，用自定义的标签替换普通的a select标签：

angular.module('myModule').directive('mySelect', function() {
 return {
   restrict: 'AE',
   require: 'ngModel',
   templateUrl: 'mySelect.html'
   replace: true,
   scope: true,
   controller: ['$scope', function($scope) { $scope.options = [1,2,3,4,5] }],
   link: function(scope, element, attrs, ctrl) {
      // No updates to scope here
   }
 }
});

模板看起来像：

<select ng-model="value" ng-options="(x | sprintf:'%02d') for x in options"></select>

出于某种奇怪的原因，ng-options创建的选项被应用了两次。生成的HTML看起来像：

<select my-select ng-options="(x | sprintf:'%02d') for x in options" class="...">
  <option value="?" selected="selected"></option>
  <option value="0">01</option>
  <option value="1">02</option>
  <option value="2">03</option>
  <option value="3">04</option>
  <option value="4">05</option>
  <option value="?" selected="selected"></option>
  <option value="0">01</option>
  <option value="1">02</option>
  <option value="2">03</option>
  <option value="3">04</option>
  <option value="4">05</option>
</select>

有人知道发生了什么事吗？

您应该像这个一样使用div而不是<select my-select></select>

<div my-select></div>

指令mySelect返回另一个select指令，因此您将得到错误Error: Multiple directives [select, select]，因为HTML将呈现为

<select ng-options="x for x in options" ng-model="value" my-select=""></select>

演示

相关文章：