javascript - Angular multiple transclude dynamic number of elements -

angular 1.5 enables ability multi transclude.

notably, it'd useful able transclude dynamic number of items directive , declare names , locations of transcludes @ later time (e.g. in link/compile).

to further illustrate, want ability like:

//example usage of directive <multi-slot-transclude-example> <transclude1>test1</div> <transclude2>test2</div> <transclude3>test3</div> <transclude4>test4</div> .... dynamic number of items ... </multi-slot-transclude-example>  //example of directive dynamically transcludes multiple items angular.module("multislottranscludeexample", [])     .directive("directivename", function(){     return {         restrict: 'e',         transclude: {             't1': '?transclude1',             't2': '?transclude2',             //i'd list able defined non-statically (e.g. in link)         },         template: '<div ng-repeat="n in transcludedelementlist">'         + '<div ng-transclude="t{{n}"></div>'         + '</div>'         }; }) 

note in directive declaration implements multi-transclude, have have prior knowledge number of items transcluded when declaring it.

is there way in either link (or using workaround), keep same functionality transclusion current offers?

unfortunately, angular not seem provide non-intrusive way this.

however, can achieved little tweak.

we need intervene in angular.js's transclusion slot logic:

...  var slots = createmap();  $template = jqlite(jqliteclone(compilenode)).contents();  // small tweak allow dynamic transclusion if (directivevalue === 'dynamic') {   directivevalue = $parse(templateattrs.transcludedynamic)(); }  if (isobject(directivevalue)) {    // have transclusion slots,   // collect them up, compile them , store transclusion functions   $template = [];  ... 

this allows specify transclusion options in component's consumer, so:

<my-custom-component transclude-dynamic="{testslot: 'test', testslot2: 'test2'}">   <test>something transclude</test>   <test2>then slot content transclude</test2> </my-custom-component> 

in component enable dynamic transclusion:

... selector: 'mycustomcomponent', template: template, transclude: 'dynamic', bindings: {   transcludedynamic: '<' } 

note bind transclusion info, enables ng-repeat, ng-if , other logic on it.

for example:

<div ng-repeat="(slot, name) in $ctrl.transcludedynamic">   <div ng-transclude="{{slot}}"></div>   <hr>   <div>something else</div> </div> 

pr: https://github.com/angular/angular.js/pull/14227