为什么angularjs在选择使用指令中包含一个空选项与transclude和replace答案

【问题标题】：Why does angularjs include an empty option in select using directive with transclude and replace为什么angularjs在选择使用指令中包含一个空选项与transclude和replace
【发布时间】：2014-04-16 08:18:42
【问题描述】：

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

这是我想要的外观示例：

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

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

但即使我在选择中添加了一个空元素（参考 other SO posts），它仍然给了我一个不需要的选项：

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

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

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

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

编辑：

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

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

【问题讨论】：

我认为这是因为您将默认（空）选项transclude 放入了选择中。从 transclude 的工作原理来看，我猜最终的选择指令根本无法识别注入的默认选项，因此创建了它自己的，因为模型不适合给定选项中的任何值。
@Yoshi - 我同意！你知道这是一个角度错误还是功能？
我想说这就是它的工作方式（尤其是指令的编译方式）。因此，我认为您必须编写自己的编译方法以将默认选项注入选择而不使用嵌入。

标签： javascript angularjs replace selector transclusion

【解决方案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>

【讨论】：

@morlock 是的，这将解决嵌入问题。只是我正在制作这个指令，以便我可以选择是否需要默认的空选项。我会更新我的问题。

【解决方案2】：

我刚遇到和你一样的问题，不幸的是@morloch 的回答对我没有帮助。在我的例子中，嵌入是动态的。

我从你的 plunker 开始，发现如果我们在预链接期间使用嵌入，它可以解决问题。

   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

【讨论】：