Выберите директиву, аналогичную ui-select

Question

Выберите директиву, аналогичную ui-select

0

Я пытаюсь создать директиву select, аналогичную ui-select. (Изобретать колесо для целей обучения).

Я пытался отобразить шаблон внутри директивы select и его не произошло. JSFIDDLE UPDATE 4

Если я создаю шаблон за пределами родительской директивы, это будет работать. хорошо. JSFIDDLE UPDATE 3

<select-directive class="myInput" placeholder="type a name here">
<select-template ng-repeat="option in names">
  <span ng-bind-html="option.firstName"></span>
  <span ng-bind-html="option.lastName"></span>
  <span ng-bind-html="option.designation"></span> 
</select-template>

Как я могу отобразить этот шаблон внутри моей директивы и применить к нему стили.

Alaksandar Jesus Gene 24 май 2016, в 04:57

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

sielakos · Answer 1 · 2016-05-24T04-57-00.000Z

Вам нужно добавить transclude в свою директиву. Transclude позволяет вставлять дочерние элементы вашей директивы в шаблон.

myapp.directive('selectDirective', function() {
  return {
    templateUrl: 'select',
    transclude: true,
    link: function(scope, element, attribute) {
      scope.class = attribute.class;
      scope.placeholder = attribute.placeholder
      scope.options = attribute.options
    }
  }
});

И в шаблоне:

<script type="text/ng-template" id="select">
  <input type="text" class="{{class}}" placeholder="{{placeholder}}">
  <ng-transclude></ng-transclude>
</script>

скрипка: https://jsfiddle.net/een9tvfn/

Текст сливается вверх и вниз. Вы можете обновить, почему это?
Та же проблема видна на вашей Fiddle версии 3 jsfiddle.net/alaksandarjesus/jsofs4gm/3 , поэтому я предположил, что вы почему-то захотели это сделать. В любом случае, это выходит за рамки данного вопроса, если вы хотите ответить на эту проблему, вы можете задать другой.