0

いくつかの(高度な?)角が頭を痛めています。

目標は、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 つですか? もしそうなら、私はそれをどのように使用しますか?

4

1 に答える 1

0

この質問と回答により、これを行う方法は、セクション全体を再コンパイルするのではなく、挿入された要素$compile のみを挿入することであることに気付きました。

便利なことに、rangy の classApplier モジュールは、onElementCreate追加されたカスタム ディレクティブをコンパイルするために使用できるコールバックを許可します。

これが作業中のプランカーです。

于 2016-09-06T11:47:56.593 に答える