Perché le opzioni vuote non sono impostate per le opzioni NG all'interno di una direttiva

Question

Sto cercando di creare una direttiva angolari per gestire i promessi di un ingresso <select>.Le 3 diverse modalità sono le seguenti:

.
1. Non permettere un'opzione vuota
   .
   • Questo è il comportamento predefinito
2. Consenti un'opzione vuota senza testo
   .
   • raggiunto impostando allow-blank="true" sulla direttiva
3. Consenti un'opzione vuota con il testo rapido
   .
   • Raggiunto impostando allow-blank a qualsiasi valore diverso da "true"

Tuttavia, Le opzioni vuote non sono mai disponibili.

demo su pinkeer

Modello

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

.

Direttiva

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

Il problema è che il contenuto del select è Transcluded (vedi sotto). Se si ispeziona gli elementi che vengono emessi, non vedi nemmeno i tag delle opzioni che hai definito all'interno.

Come stai solo utilizzando una stringa, è necessario utilizzare una funzione di pre-collegamento in cui aggiungi l'opzione corretta in via JavaScript. Il seguente codice dovrebbe fare il trucco (biforcato solare ).

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

.

Modifica La selezione non 'transclude "IT's Content, come @ Lightswitch05 ha sottolineato la direttiva Seleziona afferra il primo figlio con value="" come nodo vuoto ( sorgente ref ). Quindi, in seguito, si schiarisce il contenuto della selezione e aggiunge dinamicamente nei tag <option> pertinenti ( Source ref )