指令，包装内容并保留原始元素的属性

Question

我在创建一个包装该指令所应用的元素（及其子元素）的指令时遇到了一些麻烦。考虑到 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 属性。

我需要做什么才能做到这一点？

Answer 1

据我所知，这样做的唯一方法是在包装元素中指定包含嵌入的指令，例如：

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

当然，如果你的情况与上述完全一样，那么这样做是没有意义的。

在这个问题的上下文中，嵌入大致如下：

1. 转入的内容是具有transclude: true 指令的元素的内容；在您的情况下，<select> 的内容是空的！

2. 转入的内容放置在指令模板中指定ng-transclude的元素内。