Pourquoi les options vides ne sont-elles pas définies pour les options ng dans une directive

Question

J'essaie de créer une directive AngularJS pour gérer les invites d'un <select> saisir.Les 3 modes différents sont les suivants :

1. Ne pas autoriser une option vide
   • Ceci est le comportement par défaut
2. Autoriser une option vide sans texte
   • Obtenu en définissant allow-blank="true" sur la directive
3. Autoriser une option vide avec un texte d'invite
   • Obtenu en définissant allow-blank à toute valeur autre que "true"

Cependant, les options vides ne sont jamais disponibles.

Démo sur Plunker

Modèle

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

Directif

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

Le problème est que le contenu du select est transclus (voir ci-dessous).Si vous inspectez les éléments générés, vous ne voyez même pas les balises d'option que vous avez définies à l'intérieur.

Comme vous utilisez simplement une chaîne, vous devez utiliser une fonction de pré-liaison dans laquelle vous ajoutez l'option correcte via javascript.Le code suivant devrait faire l'affaire (Forked Pluncher).

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

MODIFIER La sélection ne "transclut" pas son contenu, comme @ lightswitch05 l'a souligné, la directive select saisit le premier enfant avec value="" comme le nœud vide (référence source).Puis plus tard, il efface le contenu de la sélection et ajoute dynamiquement le fichier correspondant. <option> Mots clés (référence source)