21

と呼ばれる作業ディレクティブがあると仮定し<my-directive>ます。いくつかのhtmlレンダリングとイベント処理を行い、徹底的にテストされています。

<wrapper>次に、このディレクティブを、このhtmlスニペットをレンダリングする別のラッパーディレクティブでラップして、次の<div class="my-div">ようなコードを記述できるようにします。

<wrapper>
   <my-directive></my-directive>
</wrapper>

そして持っている：

<div class="my-div">
   <my-directive></my-directive>
</div>

どうすればそれを達成できますか？私は以前にいくつかのアプローチを試しましたが、どれも機能していないようだったので、コードを投稿していません。

4

2 に答える 2

27

次のようなラッパーディレクティブを作成できます

app.directive('wrapper', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<div class="my-div" ng-transclude></div>'
  };
});

デモ：プランカー

于 2013-03-26T11:03:35.620 に答える
20

ng-transclude外部テンプレートが欠落していてtransclude、外部ディレクティブでtrueを設定しているようです。この属性は、がに設定されているng-transclude場合に内部htmlを挿入するようにコンパイラーに指示します。transcludetrue

app.directive('wrapper',function(){
 return {
   restrict:'E',
   template: '<div>Outer wrapper text<div ng-transclude></div></div>',
   transclude: true,
   replace:true
 }
});

デモhttp://plnkr.co/edit/sfbRyPZjqsTG6cuiaXZV?p=preview

于 2013-03-26T11:10:22.387 に答える