195

これは、angularjs のディレクティブを理解するのが最も難しい概念の 1 つだと思います。

http://docs.angularjs.org/guide/directiveのドキュメントには次のように記載されています。

transclude - 要素のコンテンツをコンパイルし、ディレクティブで利用できるようにします。通常、ngTransclude で使用されます。トランスクルージョンの利点は、リンク関数が、正しいスコープに事前にバインドされているトランスクルージョン関数を受け取ることです。一般的な設定では、ウィジェットは分離スコープを作成しますが、トランスクルージョンは分離スコープの子ではなく、兄弟です。これにより、ウィジェットにプライベートな状態を持たせ、トランスクルージョンを親 (分離前) スコープにバインドすることが可能になります。

  • true - ディレクティブのコンテンツをトランスクルードします。
  • 「要素」 - 低い優先度で定義されたディレクティブを含む要素全体をトランスクルードします。

通常はtranscludeで使用されngTranscludeます。しかし、ngTranscludeのドキュメントのサンプルでは、​​ディレクティブはまったく使用されていませんngTransclude。

これを理解するのに役立ついくつかの良い例が欲しいです。なぜそれが必要なのですか？それは何を解決しますか？それの使い方？

4

6 に答える 6

523

要素に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>...では、 and<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>.

結論として、ディレクティブを使用しているときに要素の内容を保持したい場合は、基本的にトランスクルードを使用します。

私のコード例はこちらです。これを見ることも有益です。

于 2013-03-08T16:24:29.137 に答える
0

transclude:true は、ディレクティブで定義されているすべての要素をディレクティブのテンプレート要素に追加することを意味します。

Transclude:false の場合、これらの要素はディレクティブの最終的な html に含まれず、ディレクティブのテンプレートのみがレンダリングされます。

transclude:element は、ディレクティブ テンプレートが使用されず、ディレクティブで定義された要素のみが html としてレンダリングされることを意味します。

ディレクティブを定義するときは E に制限する必要があり、ページに追加するときは

<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.
于 2016-08-27T10:19:21.047 に答える