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（ref other SO posts）中添加了一个空元素，它仍然给了我一个不需要的选项：

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

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

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

我还向角球队here添加了一个问题。

修改

我之所以希望将此作为指令，是因为我想决定是否应该选择“搜索所有车辆”选项，具体取决于我在应用程序中的实现位置。

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的答案对我没有帮助。在我的情况下，转换是动态的。

我从你的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

为什么angularjs在select using using transclude和replace中包含一个空选项

2 个答案: