javascript – AngularJS指令,包含内容并保留原始元素的属性

我对AngularJS很新,还在学习.

我创建一个包含元素(及其子元素)指令应用到的指令有一点麻烦.我不明白为什么这个看似常见的情况应该是如此困难,考虑到AngularJS中许多其他常见事情的容易程度,所以很可能是我在这里遗漏的东西.

我想要做的是在div中包装一个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>

当然,这不是我想要的.为什么我的选择元素的属性添加到包装div,而不是我使用ng-transclude属性指定的元素？ select元素需要保留ng选项和ng模型属性.

我需要做什么来完成这个？

解决方法

AFAIK唯一的方法是在包装元素中指定带有转换的指令,例如：

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

当然,如果你的情况完全如上,那就没有意义了.

在这个问题的背景下的转换大致如下：

>转载的内容是具有转录指令的元素的内容：true;在你的情况下,< select>的内容是空的！>将转录的内容放置在元素中,该元素在指令的模板中指定ng-transclude.