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

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

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

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

どうしてこれなの？

問題を説明するために最善を尽くしますが、ご容赦ください。

この全体が、ファイル選択のディレクティブです。

ディレクティブには、独自の div に含まれるいくつかのディレクティブを含む ng-transclude コンポーネントがあります。

親ディレクティブ:

ng-transclude コンテンツ:

ng-transclude コンテンツ (ビジュアル):

強調表示されたセクションのどこかをクリックすると、問題のある (dropbox) ディレクティブのクリック イベントが発生します。

問題は、当然のことながら、何が原因でそれが引き起こされ、どうすればそれを止めることができるかということです。ドロップボックス ディレクティブを持つ要素がクリックされたときにのみトリガーする必要があります。

OK、私はこれに対する答えをSO全体で検索したことを誓います。私が見つけているそれぞれの答えは、ほとんどではありませんが、正確には私が探しているものではありません。

ゴール

コレクションを表示する方法を DRY できるディレクティブを書き込もうとしています。最終的な目標は、次のようなビューまたは別のディレクティブで実行できるようにすることです。

md-grid-tile-*すべて角度のある素材から来ており、その内容で物事を巧妙にトランスクルージョンします。 profile-cardトランスクルージョンされたコンテンツをラップする任意のカスタム ディレクティブです。たとえば、プロフィール情報を表示する共通のカードがありますが、配置する場所に応じて異なるアクション ボタンを配置したいと考えています。

私はindex、非常に焦点を絞った ng-repeat のように機能するディレクティブを作成しようとしています。この例では:

• 要素の attrs は、ofを使用md-grid-tileして毎回繰り返すように指示します。eventisPublictrue
• 要素上で、含まれる要素の一致するprofile-cardすべてのeventOwnerオブジェクトを検索します。次に、それらのオブジェクトが参照するオブジェクトを繰り返します。event_idevent.$idprofileeventOwner

問題

データ ソースへの接続に問題はありませんが、問題が発生する場所は次のとおりです。

• DOM の適切な場所に複数の要素を作成する
• コンテンツをトランスクルージョンする反復要素

ここではコード サンプルの目的で、データ ソースを単純化しています。 mockProvider属性に基づいてコレクションを作成するサービスに置き換えられますindex-*。

試み #1

このアプローチを機能させることができない理由をまだ理解できていません。attr は適切にアタッチされng-repeatますが、何も繰り返されません。

試み #2

これは多くのことを繰り返しますが、次の[ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. ように爆発します。非効率性のためにこれに対して警告する他のSOコメントも見ました。

試み #3

最後に、単純な の再実装を試みましたng-repeat。これは最も近いものになりましたが、まだ機能していませんng-repeat。.

どうやって？？？

私は完全に間違った道を進んでいますか？これを行う簡単な方法はありますか？

コンテンツをトランスクルージョンするmyListディレクティブがあります。<my-list>この問題は、要素を別の要素内にネストしようとすると発生し<my-list>ます。

JS フィドル: http://jsfiddle.net/fqj5svhn/

ディレクティブ:

ディレクティブの使用例:

レンダリングされるもの:

ご覧のとおり、内側からのリスト項目myListは外側によってトランスクルージョンされているように見えますmyList。私がしたいこと：

提案？

これが私のコードです

私のindex.html：

transclude 変数はundefinedで、ctrl 変数はproto__: Objectです。親スコープをトランスクルージョンされたスコープに挿入する必要があります。トランスクルード変数は未定義です。どこが間違っているのですか。

私のAngularバージョンは1.1.5です

ありがとう。

次のディレクティブを想定します。

次のように簡単なディレクティブ関数を作成できると思いました。

しかし、Transclusion is the process of extracting a collection of DOM element from one part of the DOM and copying them to another part of the DOM, while maintaining their connection to the original AngularJS scope from where they were taken.（ドキュメントから）以来、スコープは思ったように機能しません。

だから私はこれを試しましたが、「いくつかのエラー」の部分が重複していることを除いて:

を外すとうまくいきませんel.append(clone);。

トランスクルージョンされたコンテンツがディレクティブ テンプレートのスコープを共有するようにする最善の方法は何ですか?

入力要素をトランスクルージョンし、入力ボックスの ng-model をパラメーターとして受け取る、本質的に複雑なラベル タグであるディレクティブがあります。

angular 1.4 にアップグレードする前は、ディレクティブをクリックすると ng-model が更新され、ディレクティブ内でウォッチがトリガーされました。

現在、ディレクティブをクリックしても入力ボックスに影響しますが、ディレクティブ内の値は影響を受けません。

この変更の原因と修正方法についての洞察をいただければ幸いです。

フィドル