Директива, упаковка содержимого и сохранение атрибутов оригинального элемента

У меня возникли некоторые проблемы с созданием директивы, которая обертывает элемент (и его дочерние элементы), к которому применяется директива. Я не понимаю, почему этот, казалось бы, распространенный сценарий должен быть настолько сложным, учитывая, насколько легко в AngularJS работают многие другие банальные вещи, поэтому вполне может быть, что я чего-то здесь упускаю.

Что я хочу сделать, это обернуть элемент выбора в div. Я использую transclude, чтобы сохранить оригинальный элемент select и его содержимое, но не могу заставить его работать правильно.

HTML выглядит так:

<select mlb-select ng-options="opt.val as opt.text for opt in mlb" ng-model="mlbOpt"></select>

и моя директива выглядит так:

directiveModule.directive("mlbSelect", function(){
    return {
        template: '<div class="mlb-select">'
                    + '<select ng-transclude></select>'
                    + '</div>',
        transclude: 'element',
        replace: true
    }
});

Результирующий HTML выглядит так:

<div class="mlb-select ng-pristine ng-valid" mlb-select ng-options="opt.val as opt.text for opt in mlb" ng-model="mlbOpt">
    <select ng-transclude class="ng-scope"></select>
</div>

Конечно, это не то, что я хочу. Почему свойства моего элемента select добавляются в упаковывающий элемент div, а не в элемент, который я указываю с помощью атрибута ng-transclude? Элемент select должен сохранять свойства ng-options и ng-model.

Что мне нужно сделать, чтобы достичь этого?

Ответы

Ответ 1

Насколько я знаю, единственный способ сделать это - указать директиву с transclusion в элементе-обертке, например:

<div mlb-select>
    <select ...></select>
</div>

Конечно, в этом нет никакого смысла, если ваш случай точно такой же, как указано выше.

Трансклюзия в контексте этого вопроса примерно работает как:

  1. Содержимое transclude - это содержимое элемента, имеющего директиву transclude: true; в вашем случае содержимое <select>, которое пусто!

  2. Трансклинированный контент размещается внутри элемента, который указывает ng-transclude в шаблоне директивы.