為什么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