![part1]( "part1")
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/ngTranscludeangular.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 指令中嵌入多个子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 08-24 07:43