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

我有一个carousel指令，其中包括一些分块，以将传入的items数组映射为元素结构的数组数组，然后生成类似于以下伪代码的标记:

<array of arrays>

  <array of items>
    <item>
    <item>
  </array of items>

  <array of items>
    <item>
    <item>
  </array of items>

</array of arrays>

Angular 模板如下所示:

<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>

鉴于我的查看代码:

<!-- 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>

我希望被包含的元素绑定(bind)到最深的item的ng-repeat对象

完整的Plunker带有简化的测试用例，可以在这里找到:http://plnkr.co/edit/kYItcXV0k9KvnpiYx1iG

问题是我无法在ng-transclude中放置ng-repeat属性，并且(如Plunkr中的carousel.js指令文件所示)我似乎无法通过使用指令的transclude()步骤。

任何想法将不胜感激。

最佳答案

在现有指令的链接函数中，引用对transclude函数的引用来设置变量:

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

然后，创建一个新指令以代替ng-transclude在您希望包含在其中的内容出现在以下元素上的元素上:

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

此伪指令只是将克隆添加到元素，同时避免了尝试在本身使用转置的元素内部使用转置的问题。不要忘记将其添加到您的模板中:

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

Demo

关于javascript - AngularJS : How can I transclude an element into a template that uses ng-repeat?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24050645/