Question

我有一个carousel指令，其中包含一些块，用于将传递的items数组映射到元素结构数组中，然后生成类似于以下伪代码的标记：

<array of arrays>

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

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

</array of arrays>

此角度模板如下所示：

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

我希望transcluded元素绑定到最深item

的ng-repeat对象

此处提供了一个完整的Plunker，其中包含一个减少的测试用例：http://plnkr.co/edit/kYItcXV0k9KvnpiYx1iG

问题是我不能在ng-transclude内放一个ng-repeat属性，并且（如Plunkr中的carousel.js指令文件所示）我似乎无法注入-be-transcluded markup使用指令的transclude()步骤中的compile函数手动进入该位置。

非常感谢任何想法。

Answer 1

在现有指令的link函数中设置一个引用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

AngularJS：如何将元素转换为使用ng-repeat的模板？

1 个答案: