Почему пустые параметры не устанавливаются для ng-options в директиве

Question

Я пытаюсь создать директиву AngularJS для управления подсказками <select> вход.Ниже приведены 3 различных режима:

1. Не разрешать пустой вариант
   • Это поведение по умолчанию
2. Разрешить пустой вариант без текста
   • Достигается установкой allow-blank="true" по директиве
3. Разрешить пустую опцию с текстом подсказки
   • Достигается установкой allow-blank любому значению, кроме "true"

Однако, пустые опции никогда не доступны.

Демо на Планкере

Шаблон

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

Директива

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

Проблема в том, что содержание select является включенный (см. ниже).Если вы проверите выходные элементы, вы даже не увидите теги параметров, которые вы определили внутри.

Поскольку вы просто используете строку, вам следует использовать функцию предварительной связи, в которой вы добавляете правильный параметр с помощью javascript.Следующий код должен помочь (разветвленный Планк).

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

РЕДАКТИРОВАТЬ Выбор не «переключает» свое содержимое, как указал @lightswitch05, директива select захватывает первый дочерний элемент с помощью value="" как пустой узел (ссылка на источник).Затем он очищает содержимое выбранного и динамически добавляет соответствующие <option> теги (ссылка на источник)