javascript - 为什么angularjs在使用带有transclude和replace的指令的select中包含一个空选项

Question

我正在为 select 元素创建一个新指令。作为最佳实践，我想从服务器接收一些选项，并在客户端代码中创建一个选项，例如“搜索所有汽车”。

这是我希望它看起来如何的示例:

<select>
  <option value="">Search all cars</option>
  <option value="aud">Audi</option>
  <option value="bmw">BMW</option>
  <option value="maz">Mazda</option>
</select>

重要的是“Search all cars”的值为空。

但即使我在选择中添加了一个空元素(引用 other SO posts)，它仍然给我一个不需要的选项:

<option value="?" selected="selected"></option>

这是一个 plunker example of the issue/bug使用带有 transclude 和 replace 的 Angular 指令。

有人对如何解决这个问题有建议吗？

我还向 Angular 团队添加了一个问题 here .

编辑:

我想将此作为指令的原因是我想根据它在我的应用程序中的实现位置来决定是否应该使用“搜索所有汽车”选项。

编辑 2: Angular 团队确认这是一个错误。 “看起来根本原因是，如果在初始设置后添加了未知选项，则它不会替换生成的未知选项”- lgalfaso .

Answer 1

@Yoshi 说的对，和ngTransclude有关。一旦将默认选项移动到指令本身，问题就会消失。要解决此问题，因为您不太关心默认值，您可以稍微修改指令并只导入默认选项的文本:

app.directive('mySelect', [function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      default: '@'
    },
    template: '<select ng-options="key as value for (key, value) in myMap"><option value="">{{ default }}</option></select>',
    link: function postLink(scope, element) {
      scope.myMap = {"bmw":"BMW","maz":"Mazda","aud":"Audi"}; // e.g. hashmap from server
    }
};

然后你的 HTML 变成:

<my-select ng-model="myModel" ng-change="doSomething(myModel)" default="Search all cars">
</my-select>