ディレクティブ内のng-optionsに空白のオプションが設定されていないのはなぜですか

Question

私はAngularJSディレクティブを作成して、次のプロンプトを管理しようとしています <select> 入力。次の3つの異なるモードは次のとおりです。:

1. 空白のオプションを許可しない
   • これがデフォルトの動作です
2. テキストなしで空白のオプションを許可する
   • 設定によって達成される allow-blank="true" 指令について
3. プロンプトテキストで空白のオプションを許可する
   • 設定によって達成される allow-blank 以外の任意の値に "true"

しかし、, 空白のオプションは使用できません。

プランカーのデモ

テンプレート

<select ng-options="tag.id as tag.name for tag in myTags">
  <option ng-if="allowBlank === 'true'" value=""></option>
  <option ng-if="allowBlank && allowBlank !== 'true'" value="">{{allowBlank}}</option>
</select>

指令

myApp.directive('mySelector', ['$http', function($http) {
  return {
    templateUrl:'my-selector-template.html',
    restrict: 'E',
    scope: {
      allowBlank: '@?'
    },
    replace: true,
    controller: function ($scope) {
      $scope.myTags = [
        {"name":"aliquam in","id":1},
        {"name":"massa velit","id":2},
        {"name":"nec vestibulum","id":3}
      ];
    }
  };
}]);

Answer 1

問題は、その内容が select は トランスクルード （下記参照）。出力される要素を検査すると、内部で定義したオプションタグさえ表示されません。

文字列を使用しているだけなので、javascriptを介して正しいオプションを追加する事前リンク関数を使用する必要があります。次のコードはトリックを行う必要があります（フォークされています プランク).

link: {
  pre: function(scope, element, attrs){
    if(attrs.allowBlank === 'true') element.append('<option value=""></option>');
    else if(attrs.allowBlank && attrs.allowBlank !== '') element.append('<option value="">' + attrs.allowBlank + '</option>');
  }
}

編集 @Lightswitch05がselectディレクティブが最初の子をつかむことを指摘したように、selectはその内容を"transclude"しません value="" 空のノードとして(ソース参照).その後、selectの内容をクリアし、関連するものを動的に追加します <option> タグ(ソース参照)