問題タブ [transclusion]

偽のコンテキスト メニューを提供するために一部の HTML をトランスクルージョンするディレクティブがあります。使用法は次のとおりです。

#my-elementこれにより、右クリックでコンテンツが表示されるイベントリスナーがバインドされ、context-menuオフセット$scope.getOffsetが返されます。

補間された文字列が展開されないことを除いて、すべてが機能{{ label }}します。$scope.labelの値が であるとしましょう'ABC'。「ABC」の代わりに「{{ label }}」が表示されます。ただし、ngClick は正しくバインドされているようです。

コードとデモについては、この plunkr を参照してください: http://plnkr.co/edit/QDVAHkhrfsNpRcjTwCpM?p=preview

どうしてこれなの？

いくつかのメニュー ディレクティブがあります。外側のメニュー ディレクティブには、その内部にいくつかのメニュー項目要素があります。下の 3 つ (「サインアップ」、「サインイン」、「プロファイル」) は期待どおりに機能します。上記のリンクは、別の場所に設定されているオブジェクトの配列をループする ng-repeat によって生成されます。コードを実行すると、正しい数のメニュー項目が作成されていますが、ng-repeat によって設定された属性が表示されていません。ng-repeat で作成されたリンクには、ルート、アイコン、またはラベルがありません。

理解できない。適切な数のメニュー項目が出力されているため、データは正常に見え、トランスクルードされた要素はメニュー オブジェクトにアクセスできるようです。

私のデータはどこに行きましたか?

生成された HTML:

2 つの別個の要素を 2 つの別個の場所にトランスクルージョンする必要があるため、angularJS でディレクティブのカスタム トランスクルージョンを実行しようとしています。

問題は、トランスクルージョンされた要素を正しいスコープで再コンパイルした後でも、トランスクルージョンされたコンテンツに引き継がれたディレクティブの中には、一部のディレクティブがng-bind機能するng-ifかどうかにかかわらず機能することです。ng-repeat

例: http://jsbin.com/menakapoma/1/edit?html,js,output

例でわかるように、両方が同じスコープにあり、同じ値にアクセスしているにもかかわらずng-bind、動作しますが動作しません。ng-if作品の真偽の状態ではありませんng-if。

これは、ng-ifディレクティブがコメントとしてトランスクルードされるためだと思いますが、トランスクルード ディレクティブの優先度を に設定9999して事前リンケージ関数で実行しても、まだ機能しません。

これらのディレクティブを機能させる方法を知っている人はいますか?

したがって、Angular2 では、以下は非常に単純です。

そして、あなたはこれを得る：

しかし、コンテンツにフォーマットを適用したい場合はどうすればよいでしょうか? 関数を書くことはできますか?getFormattedContent()もしそうなら、何に置き換えthis.headerますか?

format(header)さらに言えばformat、文字列を受け取り、その文字列を!. に似たテンプレートに入れることができるものはありformat( <content></content> )ますか? は文字列ではないため、明らかに私のformatメソッドはもう少し複雑にする必要がありますが、その型 ( ? ?)<content></content>を知っている限り、それは特に重大な問題ではありません。ElementCollectionNodeList

明らかに、属性にすべてを押し込んでコンテンツを空のままにするという回避策がありますが、それは醜いと思います (特に、閉じる必要のないタグを明らかに定義できないため)。

私には2つのディレクティブがあります。

そして2つ目：

ディレクティブ A の HTML:

ディレクティブ B の HTML:

そして、私はそれらを次のように使いたい：

require と ng-transclude を使用して相互に通信させ、両方のテンプレートをレンダリングさせるにはどうすればよいですか? たとえば、directiveB テンプレートの directiveA からテスト変数を出力したいと思います。私はディレクティブとトランスクルージョンが初めてです。

テンプレートにある要素をinsert( transclude)したい。<input><div>

問題は、次のようになることです。Error: $compile:multidir Multiple Directive Resource Contentionなぜなら、コードを改善して機能させる方法を誰かが説明してくれればありがたいです。

テンプレート：

指令：

使用法 (HTML):

ユーザーが製品 SKU を入力できる次の製品詳細コンポーネントがあります。この SKU は、本、デジタル製品、飲み物、テレビ、またはゲーム コンソールです。その SKU に基づいて、詳細が表示されます。SKU は 1 つのタイプにのみ属することができます。

詳細コンポーネントは、さまざまな製品タイプ コンポーネントで構成されています。すべての子製品タイプ コンポーネントを詳細コンポーネントに含める代わりに、ユーザーが SKU を入力して [詳細を表示] をクリックしたときに、子製品タイプ コンポーネントを動的に挿入することは可能ですか?

子コンポーネントを挿入する理由は、電子レンジのような新しい製品タイプが追加されたときのためです。そのコンポーネントを作成するだけで、製品の詳細の親コンポーネントを変更する必要はありません。