为什么在指令中没有为ng-options设置空白选项

Question

我试图创建一个AngularJS指令来管理一个 <select> 输入。3种不同的模式如下:

1. 不允许空白选项
   • 这是默认行为
2. 允许没有文本的空白选项
   • 通过设置实现 allow-blank="true" 关于指令
3. 允许带有提示文本的空白选项
   • 通过设置实现 allow-blank 到除此以外的任何值 "true"

然而, 空白选项永远不可用。

Plunker演示

模板

<select ng-options="tag.id as tag.name for tag in myTags">
  <option ng-if="allowBlank === 'true'" value=""></option>
  <option ng-if="allowBlank && allowBlank !== 'true'" value="">{{allowBlank}}</option>
</select>

指示

myApp.directive('mySelector', ['$http', function($http) {
  return {
    templateUrl:'my-selector-template.html',
    restrict: 'E',
    scope: {
      allowBlank: '@?'
    },
    replace: true,
    controller: function ($scope) {
      $scope.myTags = [
        {"name":"aliquam in","id":1},
        {"name":"massa velit","id":2},
        {"name":"nec vestibulum","id":3}
      ];
    }
  };
}]);

Answer 1

问题是，内容的 select 是 脱脩脟茅脕麓陆脱 （见下文）。如果你检查输出的元素，你甚至看不到你在里面定义的选项标签。

因为你只是使用一个字符串，你应该使用一个预链接函数，在那里你通过javascript添加正确的选项。下面的代码应该做的伎俩（分叉 [医]普隆克).

link: {
  pre: function(scope, element, attrs){
    if(attrs.allowBlank === 'true') element.append('<option value=""></option>');
    else if(attrs.allowBlank && attrs.allowBlank !== '') element.append('<option value="">' + attrs.allowBlank + '</option>');
  }
}

编辑 Select不会'transclude'它的内容，因为@lightswitch05指出select指令抓住第一个孩子 value="" 作为空节点（源ref).然后，它清除select的内容，并在相关的动态添加 <option> 标签(源ref)