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>

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

在这个问题的背景下的翻译大致如下：

被抄送的内容是具有transclude: true指令的元素的内容;在您的情况下，<select>的内容为空！
已转换的内容放置在指令模板中指定ng-transclude的元素内。

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

1 个答案: