指令，包装内容并保留原始元素的属性 [英] Directive, wrap content and keep attributes on original element

问题描述

我在创建一个包含指令所应用的元素(及其子元素)的指令时遇到了一些麻烦.考虑到 AngularJS 中许多其他常见的东西是多么容易，我不明白为什么这个看似常见的场景会如此困难，所以很可能是我在这里遗漏了一些东西.

我想要做的是将一个 select 元素包装在一个 div 中.我正在使用 transclude 来保留原始的 select 元素及其内容，但我无法使其正常工作.

HTML 如下所示:

</select>
我的指令如下所示:
directiveModule.directive("mlbSelect", function(){返回 {模板:'<div class="mlb-select">'+ '<选择 ng-transclude>'+ '</div>',嵌入:'元素'，替换:真}});
生成的 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"><选择 ng-transclude class="ng-scope"></select>
当然，这不是我想要的.为什么我的 select 元素的属性被添加到包装 div 而不是我用 ng-transclude 属性指定的元素?select 元素需要保留 ng-options 和 ng-model 属性.
我需要做些什么来实现这一目标?
解决方案
据我所知，唯一的方法是在包装元素中指定包含嵌入的指令，例如:
<选择...></选择>
当然，如果您的情况与上述情况完全相同，那么这样做是没有意义的.
在这个问题的上下文中嵌入大致如下:
被嵌入的内容是具有transclude: true指令的元素的内容；在您的情况下， 的内容是空的！
被嵌入的内容放置在指令模板中指定 ng-transclude 的元素内.
I have a bit of trouble creating a directive that wraps the element (and its children) that the directive is applied to. I don't get why this seemingly common scenario should be so difficult considering how easy many other commonplace things are in AngularJS, so it could very well be that I'm missing something here.

What I want to do is to wrap a select element in a div.
I'm using transclude to preserve the original select element and its content but I can't get it to work correctly.

The HTML looks like this:
<select mlb-select ng-options="opt.val as opt.text for opt in mlb" ng-model="mlbOpt"></select>
and my directive looks like this:
directiveModule.directive("mlbSelect", function(){
    return {
        template: '<div class="mlb-select">'
                    + '<select ng-transclude></select>'
                    + '</div>',
        transclude: 'element',
        replace: true
    }
});
The resulting HTML looks like this:
<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>
Of course, this is not what I want. Why are the properties of my select element added to the wrapping div and not the element I specify with the ng-transclude attribute? The select element needs to retain the ng-options and ng-model properties.

What do I need to do to accomplish this?
解决方案
As far as I know, the only way to do this is to specify the directive with transclusion in a wrapper element, e.g.:
<div mlb-select>
    <select ...></select>
</div>
Of course there is no point in doing this if youe case is exactly as above.

Transclusion in the context of this question roughly works as:

The transcluded content is the content of the element that has the directive with transclude: true; in your case the content of the <select>, which is empty!
The transcluded content is placed inside the element that specifies ng-transclude in the template of the directive.


                        
这篇关于指令，包装内容并保留原始元素的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！