¿Por qué no se configuran las opciones en blanco para ng-options dentro de una directiva?
-
21-12-2019 - |
Pregunta
Estoy intentando crear una directiva AngularJS para gestionar las indicaciones de un <select>
aporte.Los 3 modos diferentes son los siguientes:
- No permitir una opción en blanco
- Este es el comportamiento predeterminado
- Permitir una opción en blanco sin texto
- Se logra estableciendo
allow-blank="true"
sobre la directiva
- Se logra estableciendo
- Permitir una opción en blanco con texto emergente
- Se logra estableciendo
allow-blank
a cualquier valor que no sea"true"
- Se logra estableciendo
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}
];
}
};
}]);
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)