5

渡された配列を要素構造の配列の配列にマップするチャンクを含むカルーセル ディレクティブがあります。これにより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>

itemトランスクルージョンされた要素を最も深いオブジェクトにバインドしたいng-repeat

テスト ケースを縮小した完全な Plunker は、http://plnkr.co/edit/kYItcXV0k9KvnpiYx1iG から入手できます。

ng-transclude問題は、属性を の中に入れることができないことng-repeatと、(Plunkr のディレクティブ ファイルが示すように) のステップで関数carousel.jsを使用しても、トランスクルードされるマークアップをその場所に手動で挿入できないように見えることです。指令。transclude()compile

どんなアイデアでも大歓迎です。

4

1 に答える 1

6

既存のディレクティブの 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>

デモ

于 2014-06-05T03:11:51.500 に答える