为什么angularjs在select using指令中使用带有transclude和replace的空选项

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>

重要的是“搜索所有汽车”的值为空。

但是，即使我在select中添加了一个空元素（请参阅其他SO posts ），它仍然给我一个不需要的选项：

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

这是使用带有transclude和replace的Angular指令的问题/错误的一个小例子 。

任何人都提出了如何解决此问题的建议？

我还在这里向角度小组添加了一个问题。

编辑：

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

EDIT2： 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>

Answer 2

我只是遇到了与您相同的问题，很遗憾，@ morloch的回答没有帮助我。 就我而言，包含是动态的。

我从您的unk客开始，发现，如果我们在预链接过程中使用包含功能，就可以解决问题。

   link: {
      pre:function preLink(scope, element, attrs, controllers, transcludeFn) {
        scope.myMap = {"bmw":"BMW","maz":"Mazda","aud":"Audi"}; // e.g. hashmap from server
        transcludeFn(scope, function(clone) {
          element.append(clone);
        });
      }
    } 

这是我的朋克： http ://plnkr.co/edit/4V8r6iW2aKCLLbpIZc5e?p=preview