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

Question

我正在尝试创建一个AngularJS指令来管理<select>输入的提示。 3种不同的模式如下：

1. 不允许空白选项
   • 这是默认行为
2. 允许没有文字的空白选项
   • 通过在指令
   上设置allow-blank="true"来实现
3. 允许带有提示文字的空白选项
   • 将allow-blank设置为"true"
   以外的任何值，即可达成

但是，空白选项永远不可用。

Demo on 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添加正确的选项。以下代码应该可以解决问题（分叉Plunk）。

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不会“转换”它的内容，因为@ lightswitch05指出select指令抓取第一个value=""的子节点作为空节点（source ref） 。然后它会清除选择内容并动态添加相关的<option>代码（source ref）