Incorporating a carousel directive involves chunking the passed in array of items and mapping it into an array of arrays of elements. This structure then generates markup resembling the pseudo code provided below:
<array of arrays>
<array of items>
<item>
<item>
</array of items>
<array of items>
<item>
<item>
</array of items>
</array of arrays>
The angular template designed for this scenario is as follows:
<div class="carousel__content" ng-style="carousel.containerWidth">
<ul class="carousel__chunk" ng-repeat="chunk in carousel.chunks" ng-style="carousel.chunkWidth">
<li class="carousel__item" ng-repeat="item in chunk" ng-style="carousel.itemWidth">
<div class="carousel__item-content">
[element to be transcluded here.]
</div>
</li>
</ul>
</div>
Using the following view code:
<!-- Ensure that the <a> tag appears within the 'carousel.html' template's ng-repeat list. -->
<carousel items="items" config="config">
<a href="#">{{ item.name }}</a>
</carousel>
The objective is to have the transcluded element bind to the item object of the deepest ng-repeat.
A comprehensive Plunker showcasing a simplified test case can be accessed via this link: http://plnkr.co/edit/kYItcXV0k9KvnpiYx1iG
The issue arises from the inability to insert an ng-transclude attribute within the ng-repeat. Additionally, efforts to manually inject the transcluded markup at that location using the transclude() function in the compile phase of the directive as demonstrated in the carousel.js directive file in the Plunkr, have proven unsuccessful.
Any suggestions or solutions would be greatly appreciated.