У меня возникли некоторые проблемы с созданием директивы, которая обертывает элемент (и его дочерние элементы), к которому применяется директива. Я не понимаю, почему этот, казалось бы, распространенный сценарий должен быть настолько сложным, учитывая, насколько легко в 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.
Что мне нужно сделать, чтобы достичь этого?