2

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

这是我希望它看起来如何的一个示例：

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

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

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

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

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

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

我还在这里向 Angular 团队添加了一个问题。

编辑：

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

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

4

2 回答 2

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>
于 2014-04-16T09:45:16.910 回答
0

我刚遇到和你一样的问题，不幸的是@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);
        });
      }
    }

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

于 2016-05-19T14:14:39.103 回答