Por que são os em branco opções não sendo definida por ng-opções dentro de uma directiva
-
21-12-2019 - |
Pergunta
Eu estou tentando criar um AngularJS Directiva para gerenciar o promps de um <select>
entrada.Os 3 modos diferentes, são como segue:
- Não permita que uma opção em branco
- Este é o comportamento padrão
- Permitir uma opção em branco, sem texto
- Conseguido através da criação
allow-blank="true"
sobre a directiva
- Conseguido através da criação
- Permitir uma opção em branco com comandos de texto
- Conseguido através da criação
allow-blank
para qualquer valor diferente de"true"
- Conseguido através da criação
No entanto, em branco opções nunca estão disponíveis.
Demonstração no Plunker
Modelo
<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}
];
}
};
}]);
Solução
O problema é que o conteúdo do select
é transcluída (veja abaixo).Se você inspecionar os elementos que estão de saída você não ver a opção de etiquetas definidas dentro.
Como você está apenas usando uma seqüência de caracteres, você deve usar um pré-função de ligação que você adicionar a opção correta em via javascript.O código a seguir deve fazer o truque (Parágrafos Plunk).
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 A escolha não 'transclude' é o conteúdo, como @lightswitch05 apontou a escolha directiva agarra o primeiro filho com o value=""
como o nó vazio (fonte bibliográfica).Em seguida, mais tarde, ele limpa o conteúdo da escolha e adiciona dinamicamente no respectivo <option>
tagsfonte bibliográfica)