Warum werden die leeren Optionen nicht für ng-options innerhalb einer Direktive festgelegt?

Question

Ich versuche, eine AngularJS-Direktive zu erstellen, um die Eingabeaufforderungen von a zu verwalten <select> Eingang.Die 3 verschiedenen Modi sind wie folgt:

1. Lassen Sie keine leere Option zu
   • Dies ist das Standardverhalten
2. Erlauben Sie eine leere Option ohne Text
   • Erreicht durch Einstellung allow-blank="true" zur Richtlinie
3. Lassen Sie eine leere Option mit Eingabeaufforderungstext zu
   • Erreicht durch Einstellung allow-blank auf einen anderen Wert als "true"

Jedoch, Die leeren Optionen sind nie verfügbar.

Demo auf Plunker

Vorlage

<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>

Richtlinie

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

Das Problem besteht darin, dass der Inhalt der select Ist transkludiert (siehe unten).Wenn Sie die ausgegebenen Elemente untersuchen, sehen Sie nicht einmal die Options-Tags, die Sie darin definiert haben.

Da Sie nur eine Zeichenfolge verwenden, sollten Sie eine Vorverknüpfungsfunktion verwenden, bei der Sie die richtige Option per Javascript hinzufügen.Der folgende Code sollte den Zweck erfüllen (Forked Zupfen).

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>');
  }
}

BEARBEITEN Die Auswahl „transkludiert“ ihren Inhalt nicht, da @lightswitch05 darauf hingewiesen hat, dass die Select-Direktive das erste untergeordnete Element erfasst value="" als leerer Knoten (Quellenangabe).Später löscht es den Inhalt der Auswahl und fügt dynamisch das Relevante hinzu <option> Stichworte (Quellenangabe)