AngularJS:在单个 Angular 指令中嵌入多个子元素 [英] AngularJS : transcluding multiple sub elements in a single Angular directive
问题描述
我在 创建一个包含其他元素的指令,我想我正确理解它的作用.
如果您有一个指令适用于其中包含内容的元素,例如:
指令内容
它将允许您使用 ng-transclude
标记指令模板中的元素,并且元素中包含的内容将在标记元素内呈现.
所以如果 myDirective
的模板是
before<div ng-transclude></div><div>之后</div>
它将呈现为
before<div ng-transclude>指令内容</div><div>之后</div>
我的问题是是否有可能以某种方式将多于一个 html 块传递到我的指令中?
例如,假设指令用法如下所示:
<part1>content1</part1><part2>content2</part2></my-multipart-directive>
并有一个模板,如:
这:<div ng-transclude=part2"></div>之后是:<div ng-transclude="part1"></div>但现在他们换了<div>我希望它呈现如下:
这:<div ng-transclude="part2">content2</div>之后是:<div ng-transclude="part1">content1</div>但现在他们换了<div>也许我可以以某种方式将节点的 HTML 值绑定到模型,以便我能够以这种方式使用它而无需将其称为transclude"?
解决方案 从 Angular 1.5 开始,现在可以创建多个插槽.代替 transclude:true,您提供了一个 对象,其中包含每个插槽的映射:
https://docs.angularjs.org/api/ng/directive/ngTransclude>
angular.module('multiSlotTranscludeExample', []).directive('窗格', 函数(){返回 {限制:'E',转置:{'title': '?pane-title','body': '窗格体','footer': '?pane-footer'},模板:'<div style="border: 1px solid black;">'+'<div class="title" ng-transclude="title">后备标题</div>'+'<div ng-transclude="body"></div>'+'<div class="footer" ng-transclude="footer">后备页脚</div>'+'</div>'};})
I was reading about ng-transclude
in the AngularJS docs on Creating a Directive that Wraps Other Elements and I think I understand properly what it does.
If you have a directive that applies to an element that has content inside it such as the following:
<my-directive>directive content</my-directive>
it will allow you to tag an element within the directive's template with ng-transclude
and the content included in the element would be rendered inside the tagged element.
So if the template for myDirective
is
<div>before</div>
<div ng-transclude></div>
<div>after</div>
it would render as
<div>before</div>
<div ng-transclude>directive content</div>
<div>after</div>
My question is if it is possible to somehow pass more then a single block of html into my directive?
For example, suppose the directive usage would look like this:
<my-multipart-directive>
<part1>content1</part1>
<part2>content2</part2>
</my-multipart-directive>
and have a template like:
<div>
this: <div ng-transclude="part2"></div>
was after that: <div ng-transclude="part1"></div>
but now they are switched
<div>
I want it to render as follows:
<div>
this: <div ng-transclude="part2">content2</div>
was after that: <div ng-transclude="part1">content1</div>
but now they are switched
<div>
Perhaps I could somehow bind the HTML value of a node to the model so that I will be able to use it in such a way without calling it "transclude"?
解决方案 Starting Angular 1.5, it's now possible to create multiple slots. Instead of transclude:true, you provide an object with the mappings of each slot:
https://docs.angularjs.org/api/ng/directive/ngTransclude
angular.module('multiSlotTranscludeExample', [])
.directive('pane', function(){
return {
restrict: 'E',
transclude: {
'title': '?pane-title',
'body': 'pane-body',
'footer': '?pane-footer'
},
template: '<div style="border: 1px solid black;">' +
'<div class="title" ng-transclude="title">Fallback Title</div>' +
'<div ng-transclude="body"></div>' +
'<div class="footer" ng-transclude="footer">Fallback Footer</div>' +
'</div>'
};
})
这篇关于AngularJS:在单个 Angular 指令中嵌入多个子元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文