Pregunta

Estoy intentando crear una directiva AngularJS para gestionar las indicaciones de un <select> aporte.Los 3 modos diferentes son los siguientes:

  1. No permitir una opción en blanco
    • Este es el comportamiento predeterminado
  2. Permitir una opción en blanco sin texto
    • Se logra estableciendo allow-blank="true" sobre la directiva
  3. Permitir una opción en blanco con texto emergente
    • Se logra estableciendo allow-blank a cualquier valor que no sea "true"

Sin embargo, las opciones en blanco nunca están disponibles.

Demostración de Plunker

Plantilla

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

Directiva

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}
      ];
    }
  };
}]);
¿Fue útil?

Solución

El problema es que el contenido del select es transcluido (vea abajo).Si inspecciona los elementos que se generan, ni siquiera verá las etiquetas de opción que definió en su interior.

Como solo está usando una cadena, debe usar una función de enlace previo donde agregue la opción correcta a través de JavaScript.El siguiente código debería funcionar (Bifurcado Ruido sordo).

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

EDITAR La selección no 'transcluye' su contenido, como señaló @lightswitch05, la directiva select toma al primer hijo con value="" como el nodo vacío (referencia fuente).Luego, borra el contenido de la selección y lo agrega dinámicamente en el archivo relevante. <option> etiquetas (referencia fuente)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top