10

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

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

4

1 回答 1

1

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

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

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

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

  1. 被嵌入的内容是带有;指令的元素的内容。transclude: true在你的情况下，内容<select>是空的！

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

于 2014-04-08T08:47:59.263 回答