web-dev-qa-db-ja.com

カスタムHTMLでディレクティブをラップする（別のディレクティブ）

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

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

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

そして持っている：

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

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

angularjsangularjs-directive
21
ŁukaszBachman

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

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

デモ： プランカー

27
Arun P Johny

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

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

20
charlietfl