問題タブ [angularjs-ng-transclude]

transclude: 'true'いつ、いつ使用する必要がありtransclude: 'element'ますか? angular docsについては何も見つかりませんtransclude: 'element'。かなり混乱しています。

どなたか簡単な言葉で説明していただけると幸いです。各オプションの利点は何ですか? それらの本当の違いは何ですか？

これは私が見つけたものです：

コンパイル関数内では、トランスクルード リンク関数を使用して DOM を操作したり、任意の HTML タグで ngTransclude ディレクティブを使用して、トランスクルードされた DOM をテンプレートに挿入したりできます。

と

これにより、要素全体がトランスクルードされ、コンパイル機能にトランスクルード リンク機能が導入されます。スコープがまだ作成されていないため、ここでスコープにアクセスすることはできません。コンパイル関数は、スコープにアクセスできるディレクティブのリンク関数を作成し、transcludeFn を使用すると、DOM 操作のために (トランスクルードされた) 複製された要素に触れたり、スコープにバインドされたデータを使用したりできます。参考までに、これは ng-repeat と ng-switch で使用されます。

これはあなたが見ることができるプランカーの例です: http://plnkr.co/edit/NQT8oUv9iunz2hD2pf8H

Web コンポーネントにしたいディレクティブがあります。私は AngularJS でそれを達成する方法についていくつかの方法を考えましたが、その一部に問題があります。別の方法を教えてくれるのではなく、誰かが私の失敗を説明してくれることを願っています。

css クラスやサブコンポーネントなどを含むシェルをセットアップするディレクティブ コンポーネントがあると想像してください。ただし、ユーザーはコンポーネントのメイン コンテンツを定義できます。次のようなもの：

list ディレクティブの HTML は次のようになります (OOCSS を使用):

通常、これはリンク機能でディレクティブ スコープを新しいコンテンツにリンクすることで解決できます。そして、それは他のコンポーネントでも機能します。ただし、ng-repeat を導入すると、コントロールのその部分が壊れているようです。私が知る限り、適切な場所は compile 関数かもしれませんが、ドキュメントには transcludeFn パラメーターが非推奨になると書かれているため、どうすればよいかわかりません。

また、ベータ版の AngularJS を使用する場合、バグまたは新しいパラダイムが発生する可能性があることにも注意してください。これはもはや問題ではありません。トランスクルージョンされたコンテンツは、常にディレクティブ スコープと外部コントローラー スコープにアクセスできるようです。

これについての啓蒙に本当に感謝しています。

「パネル」と呼ばれるこのカスタム ディレクティブがあります。

私の問題は、ネストされたパネル ディレクティブをレンダリングできないことです。javascript については、plunkr http://plnkr.co/edit/D0LfQqBViuraSNfmym4g?p=previewを参照してください。

私が期待する

しかし、代わりに私は得る

ご覧のとおり、私の目的は、dom を操作するのではなく、コントローラーから提供されたデータから出力をレンダリングすることです。データを収集してコントローラーに提供する手段としてディレクティブを使用することを検討しています。これにより、コントローラーによって提供されたデータからテンプレートをレンダリングできるようになります。その結果、div で ng-transclude を使用せず、代わりに $compile または transclude(scope, fun...) の組み合わせを使用して、記載された目標を達成するソリューションを探しています。私の目標は、$compile と transclude(scope, fun...) を効果的に使用する方法をよりよく理解することでもあります。

左パネルと右パネルを持つ body ディレクティブを追加しようとしています。しかし、これらのパネルの間に、body ディレクティブ専用のコンテンツがいくつかあります。現在、transclude=trueオプションを使用してコンテンツをロードしています。しかし、2 つの ng-transclude を使用する方法を探しています。それを解決する方法をたくさん調べましたが、エレガントな解決策を見つけることができませんでした。body ディレクティブのコンパイル手順で、トランスクルードされたオブジェクトを手動で追加する必要がありました。以下は私がそれを解決した方法です：

ボディ ディレクティブ

テンプレート

この例の JSFiddle は次のとおりです。私はこのようなものを探しています:

あると便利なテンプレート

質問: 私は何か間違ったことをしていますか? この問題を解決するための推奨される方法はありますか?

リスト内の通知ウィジェットのフレームとして機能するラッパー ディレクティブを作成したいと考えています。そのフレームでは、後でオブジェクトのプロパティに基づいて特定のコンテンツをトランスクルージョンしたいと考えていnotifます。現在、要素をハードコーディングしていdivます。

私は index.cshtml に以下を持っています:

これはディレクティブの仕様です:

次のように機能するのはなぜdivですか?

...しかし、要素のように使用すると、フクシアの div が表示されなくなります。

ng-transclude属性または要素として使用する場合の違いは何ですか。（私はFirefoxを使用しています）。

元のコンテンツをトランスクルージョンして解析し、元のコンテンツの情報を使用して新しいコンテンツを構築するディレクティブがあります。その要点は次のようになります。

次に、次のように使用します。

これはすべてこのようにうまく機能します。ng-repeatこの問題は、次のようにディレクティブ コンテンツ内で使用しようとすると発生します。

これをしようとすると、アイテムがありません。なぜこれが機能しないのか、または同じ種類のことを達成するためのより良い方法があるかどうかは誰にも分かりますか?

formangularディレクティブテンプレート内で要素を使用することは可能ですか? たとえば、フォームを完全に生成して繰り返しコーディングを節約したい場合があります。HTML はデータを表示し、ディレクティブは編集を自動生成します。頻繁に繰り返される編集ページに役立つと思います。

そしてディレクティブ：

しかし、実行すると、出力はトランスクルードされず、form要素が取り除かれます。

• は<span>{{item.name}}</span>トランスクルージョンされていません
• <form>要素が完全に削除されます

私は何を間違っていますか？

transclude にある別のコントローラーから (ディレクティブ コントローラーにある) ディレクティブ変数を変更するにはどうすればよいですか?