AngularJS : How can I transclude an element into a template that uses ng-repeat?

Question

I've got a carousel directive which includes some chunking to map the passed in array of items into an array of arrays of elements structure which then generates markup similar to the pseudo code 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 for this looks like this:

<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 should be transcluded into this spot.]

      </div>
    </li>
  </ul>
</div>

Given my view code:

<!-- The <a> tag should appear inside the 'carousel.html' template's ng-repeat list. -->
<carousel items="items" config="config">
  <a href="#">{{ item.name }}</a>
</carousel>

I would want the transcluded element to bind to the item object of the deepest ng-repeat

A full Plunker with a reduced test case is available here: http://plnkr.co/edit/kYItcXV0k9KvnpiYx1iG

The problem is that I cannot put a ng-transclude attribute inside the ng-repeat and that (as the carousel.js directive file in the Plunkr shows) I can't seem to inject the to-be-transcluded markup manually into that spot either using the transclude() function in the compile step of the directive.

Any ideas would be much appreciated.

Answer 1

Set a variable with a reference to the transclude function in the link function of your existing directive:

 post: function($scope, $element, attrs) {
     $scope.transclude = transclude; 
     ...

Then, create a new directive to use in place of ng-transclude on the element you wish for the transcluded content to appear inside of:

.directive('innerTransclude', function(){
  return function(scope, elem, attrs){
    scope.transclude(scope, function(clone){
      elem.append(clone);
    });
  }
})

This directive simply appends the clone to the element, while avoiding the issue with trying to use transclusion inside of an element which uses transclusion itself. Don't forget to add it to your template:

<div class="carousel__item-content" inner-transclude></div>

Demo