トランスクルージョンを使用して、ページの tbody 要素に適用されるディレクティブにコンテンツを挿入する必要があります。Transclude をディレクティブ テンプレートの tr 要素に適用しようとしていますが、どういうわけかブラウザが tr 要素を倍増させます。transclude が実行される前に、各 td リストを tr に自動ラップする必要があります。どうすればこれを防ぐことができますか?

注意: この場合、これをテーブルとして機能させる必要があるため、テーブルを div やその他の要素に置き換える提案は控えてください。

テンプレート：

含むファイル:

js:

結果：

どうしてそうなった？2 つのタグが入れ子になっているのはなぜですか?

トランスクルージョンを使用するカスタム ディレクティブを作成しています。トランスクルージョンが行われた後に、トランスクルージョンされた DOM コンテンツを変更する必要があります....ポストリンクまたはコントローラーでそれを行いますか...リンク...? トランスクルージョンが発生した順序でどこに分類されるかわからないため、トランスクルージョンが発生した後に JS が確実に実行されるようにする方法がわかりません。

angualrjs ディレクティブを使用して機能のようなドロップダウン リストを作成しました。
以下は私が直面している問題です。

• ドロップダウン リストの配置は静的では正しいが、動的では正しくない
• getValue親ディレクティブで定義した関数が、トランクルードされたディレクティブから呼び出されていないため、オプション リストを選択できません。

誰かこれの解決策を教えてください

私のコードは以下のとおりです

プランカー

私のAngularアプリケーションには、共有構造、同一のhtmlを持ついくつかのパネルがあります。

パネル内では、コンテンツと動作が変更されます。基本的に、それぞれが個別のディレクティブです。それらを panel-content と呼びましょう。

これは私が最適だと思う解決策に近いですが、アーキテクチャ上の疑問がいくつかあります。

私はディレクティブを持っているので（transclude trueセットを持っています）：

テンプレートは次のようになります。

パネルを繰り返す必要があります

これはすべて問題ありませんが、表示する必要がある各反復で「選択」する合理的な方法は何でしょう<panel-content>か?

私が使用できるものを持っているとしましょうpanel.id。

いくつかの方法でそれを実現できることに気付きまし<panel-content>た。パネル ID を使用してビュー内で ng-switch を実行できますpanel.id。

しかし、何らかの理由で、もっと簡単なものが欠けていると確信していますか?

このアーキテクチャは決まったものではないことに注意してください。私のニーズにより適した別の構造があれば教えてください。

もう一度質問ですが、どのように選択すればよいでしょうか。というか、表示するものを誰が選択するか<panel-content>。

属性ディレクティブをトランスクルード ディレクティブに動的に追加しようとしています。

たとえば、テンプレートは次のように始まります。

イベント (クリックなど) が発生すると、次のような属性ディレクティブが追加されます。

これを行うために、次の JavaScript を使用しています。

ただし、これにより次の結果が得られます。

私がどのようにやっているかを示すために、Plunker でやろうとしていることの簡素化されたデモを作成しました。

http://plnkr.co/edit/xIKwJqKFbvs6DVnJrDUh?p=preview

どんな助けでも大歓迎です。ありがとう。

アップデート：

リクエストに応じて、私が達成しようとしていることを達成するためのより良い方法があるかどうかを尋ねるフォローアップの質問を作成しました。

AngularJS で「tab-away」属性ディレクティブを作成する

transcludeオプションがtrueに設定された、分離されたスコープを持つディレクティブとして、単純な再利用可能なコレクションコンテナを作成しました。

});

そして、リスト項目のクリックを処理するコントローラーから関数を渡したいリスト ビュー ディレクティブ

私のHTMLのチャンクは次のようになります。

actionしかし、リンクをクリックすると、定義されていないという参照エラーが表示されます。問題は、コントローラーからこのディレクティブに関数を渡す方法です。私が理解しているように、transcluded スコープは独立したスコープの子であり、これは私が乗り越えられなかった障害です!

これがPlunkrです。

angular-uiを使用しています。angularディレクティブを使用して再利用可能な要素を作成するhtmlコーディングを削減しようとしています。私は間違いなく何かが欠けています。私がやりたいことはこれです：

<modal modal-title="Some Title" button-text="Click Me">Modal Content</modal>

そして、モーダルとボタンを出力したいので、モーダルにすべてのマークアップを何度も追加する代わりに、このカスタム要素を使用できます。要素内のコンテンツを取得する方法を一生理解できないことを除いて、機能しているようです。私がやっていることの基本は次のとおりです。

テンプレートはこちら (partials/modal.html)

要素のコンテンツを mCtrl.content に取得するにはどうすればよいですか? 残りの部分は期待どおりに機能しますが、何かが足りないだけです。ありがとう！

編集：トランスクルージョンを使用する必要があるようですので、これが私がやりたいことです：

<div class="modal-body"><ng-transclude></ng-transclude></div>

しかし、モーダルを開くと、この種のエラーが発生します。

[ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <ng-transclude>