我在创建一个包装该指令所应用的元素(及其子元素)的指令时遇到了一些麻烦。考虑到 AngularJS 中许多其他常见的事情是多么容易,我不明白为什么这个看似常见的场景会如此困难,所以很可能我在这里遗漏了一些东西。
我想要做的是将一个选择元素包装在一个 div 中。我正在使用 transclude 来保留原始选择元素及其内容,但我无法让它正常工作。
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>
当然,这不是我想要的。为什么我的选择元素的属性被添加到包装 div 而不是我使用 ng-transclude 属性指定的元素?select 元素需要保留 ng-options 和 ng-model 属性。
我需要做什么才能做到这一点?