指令，包裝內容並保留原始元素的屬性

Question

我在創建一個包含指令所應用的元素（及其子元素）的指令時遇到了一些麻煩。 考慮到AngularJS中許多其他常見的事情是多么容易，我不明白為什么這個看似常見的場景應該如此困難，所以很可能我在這里遺漏了一些東西。

我想要做的是將一個select元素包裝在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屬性。

我需要做些什么才能做到這一點？

Answer 1

據我所知，唯一的方法是在包裝元素中指定帶有轉義的指令，例如：

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

當然，如果您的情況與上述完全一致，那么這樣做是沒有意義的。

在這個問題的上下文中的翻譯大致如下：

1. 被轉換的內容是具有transclude: true指令的元素的內容 transclude: true ; 在你的情況下<select>的內容，這是空的！

2. 已轉換的內容放置在指令模板中指定ng-transclude的元素內。