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

Question

我对AngularJS很新,还在学习.

我在创建一个包含指令所应用的元素(及其子元素)的指令时遇到了一些麻烦.考虑到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。在你的情况下， 的内容<select>是空的！

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