Angular 1.5 introduces the option to multi-transclude.
An interesting feature would be the ability to transclude a variable number of items into a directive and specify their names and positions at a later stage (for example, in the link/compile functions).
For instance, I envision being able to achieve something like:
//Demonstration of directive usage
<multi-slot-transclude-example>
<transclude1>TEST1</div>
<transclude2>TEST2</div>
<transclude3>TEST3</div>
<transclude4>TEST4</div>
.... any number of dynamic items ...
</multi-slot-transclude-example>
//Sample directive that dynamically transcludes multiple items
angular.module("multiSlotTranscludeExample", [])
.directive("directiveName", function(){
return {
restrict: 'E',
transclude: {
't1': '?transclude1',
't2': '?transclude2',
//I want this list to be capable of dynamic definition (e.g., in the link function)
},
template: '<div ng-repeat="n in transcludedElementList">'
+ '<div ng-transclude="t{{n}"></div>'
+ '</div>'
};
})
It's worth mentioning that when implementing a multi-transclude in a directive, you need to know beforehand the number of items to be transcluded.
Is there a way to achieve a similar functionality either through the link function or using a workaround while maintaining the current transclusion capabilities?