いくつかの(高度な?)角が頭を痛めています。
目標は、WYSIWYG HTML エディターを拡張して、ユーザーが特定の角度ディレクティブを任意の HTML コンテンツに挿入できるようにすることです。私はmedium-editorとそのangular-medium-editorラッパーを選択しました (しかし、より良い解決策がある場合、私はそれに固執していません)。
この Plunkは、エディター ディレクティブが (editable
属性を使用して) インスタンス化され、アクティブ化される方法を示しています。ツールバーは、選択したテキストの周りにカスタム ディレクティブを追加するボタンを含むようにカスタマイズされています:<my-custom-directive class="bg-info"> ... </my-custom-directive>
. (デモンストレーション用に、カスタム ディレクティブはそのコンテンツをボタンにラップ (トランスクルード) し、クリックするとアラートをトリガーします)。
エディター内のディレクティブがコンパイルされるように、エディターのコンテンツを (再) コンパイルする際に問題があります。使用$compile(element.contents())(scope)
すると、トランスクルージョンを使用するディレクティブに対して ngTransclusion:orphan エラーがスローされます。(これは、エディターのlink
関数が呼び出されるまでに角度が既にトランスクルージョンを行っているためだと理解しています。)
トランスクルージョンを使用しないように、すべての潜在的なカスタム ディレクティブをリファクタリングすることはできません。
任意のエディター コンテンツ (多くの異なるディレクティブを含む可能性があります) を正常にコンパイルするには、どのようなパターンを使用できますか? これは、$compile の使用が正当化される「フリンジ ケース」の 1 つですか? もしそうなら、私はそれをどのように使用しますか?