4

John Lindquistチュートリアルでは、トランスクルージョンを使用して、ディレクティブからコンテンツを取得し、目的の場所に配置します。

しかし、ドキュメントでは、translude関数と、それをコントローラーとコンパイル関数に渡すことについて説明しています。それで、トランスクルージョンとは何ですか、そしてそれをどのように使うのですか？

4

3 に答える 3

16

基本的なディレクティブを作成する場合、トランスクルージョンは簡単です。

module.directive( 'myTransDir', function () {
  return {
    transclude: true,
    scope: true,
    replace: true,
    template: '<div><h1>Hello!</h1><div ng-transclude></div></div>',
  };
});

テンプレートにはngTranscludeディレクティブが含まれているため、コンテンツが自動的にトランスクルージョンされます。次のように使用すると：

<div my-trans-dir>
  <p>Some Content</p>
</div>

結果の HTML は次のようになります。

<div>
  <h1>Hello!</h1>
  <div>
    <p>Some Content</p>
  </div>
</div>
于 2013-01-24T20:52:53.300 に答える
6

@JoshはすでにngTranscludeをカバーしています。これは、トランスクルージョンの「通常のユースケース」です。

また、ドキュメントでこれらのステートメントについて質問していました。

controller-コントローラーコンストラクター関数...
コントローラーは次のローカルで注入可能です：
...
$ transclude-正しいトランスクルージョンスコープに事前にバインドされたトランスクルージョンリンク関数：function（cloneLinkingFn）。

と

コンパイル関数は、テンプレートDOMの変換を処理します...
コンパイル関数は、次の引数を取ります。
...
transclude-トランスクルージョンリンク関数：function（scope、cloneLinkingFn）。

私は、これらのトランスクルージョンの難解なユースケースを検討します。私は個人的にstackoverflowでこれらの言及を1つだけ見ました、そしてそこであなたを紹介します：
あなたはトランスクルージョン関数とクローンリンク関数で正確に何をしますか？

@bleshからの引用：「これらの2つのトランスクルージョンの方法は、プロセスへのプログラムによるアクセスを介して、トランスクルージョンに関するすべてを制御する機能を提供するためにあります。」

更新：トランスクルージョンについての素敵なブログ投稿を見つけました。

于 2013-01-24T22:29:26.067 に答える
2

ジョンの「Building Zippy」チュートリアルのeghead.ioは、トランスクルージョンについて私が見た中で最も優れた説明です。あなたは両方のステートメントで正しいです。ジョンは例を挙げただけですが、舞台裏で起こっているのは、マークアップのhtmlがテンプレートを使用してコンパイラーに渡されることです。彼のチュートリアルでは、John が誤ってコンテンツをテンプレートに残してしまい、angular のコンパイラがマークアップ html とテンプレート html を連結する方法を見ることができます。

于 2013-01-24T20:35:43.920 に答える