[解決済み】ディレクティブ定義のtranscludeオプションの理解？

質問

Angularjsのディレクティブで一番理解しにくいコンセプトの一つだと思うのですが。

からのドキュメントは http://docs.angularjs.org/guide/directive は言う。

トランスクルード - 要素の内容をコンパイルし、ディレクティブが利用できるようにします。一般的に ngTransclude と共に使用されます。トランスクルードの利点は、リンク関数が正しいスコープにあらかじめバインドされたトランスクルード関数を受け取ることです。典型的な設定では、ウィジェットはアイソレートスコープを作成しますが、トランスクルードは子ではなく、アイソレートスコープの兄弟になります。これにより、ウィジェットがプライベートな状態を持ち、トランスクルージョンが親（分離前の）スコープにバインドされることが可能になります。

• true - ディレクティブの内容をトランスクルードします。
• 'element' - 優先順位の低いディレクティブも含めて、要素全体を転置します。

それは、以下の通りです。 transclude と一緒に使うのが一般的です。 ngTransclude . しかし、doc のサンプルは ngTransclude は使用しません。 ngTransclude ディレクティブは一切使用しません。

これを理解するために、良い例が欲しいです。なぜそれが必要なのでしょうか？何を解決するのか？どのように使うのか？

どのように解決するのか？

というディレクティブを考えてみましょう。 myDirective の中にあって、その要素が他のコンテンツを囲んでいるとします。

<div my-directive>
    <button>some button</button>
    <a href="#">and a link</a>
</div>

もし myDirective がテンプレートを使っている場合、その中身は <div my-directive> は、ディレクティブテンプレートに置き換えられます。だから、持つこと。

app.directive('myDirective', function(){
    return{
        template: '<div class="something"> This is my directive content</div>'
    }
});

を実行すると、このようなレンダリングになります。

<div class="something"> This is my directive content</div> 

元の要素の内容 <div my-directive> は失われます (ということになります（というより、置き換えてください）。だから、この仲間にサヨナラしてください。

<button>some button</button>
<a href="#">and a link</a>

では、もしあなたが <button>... と <a href>... をDOMに入れるのですか？トランスクルージョンと呼ばれるものが必要です。コンセプトはとてもシンプルです。 ある場所から別の場所にコンテンツを含める . これで、あなたのディレクティブは次のようになります。

app.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>'
    }
});

これでレンダリングされる。

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>. 

結論から言うと、基本的にはディレクティブを使っているときに、要素の内容を保持したい場合にtranscludeを使います。

私のコード例は ここで . を見るのもいいでしょう。 これ .