编译角度编辑器指令

Question

一些（先进的？）角度让我头疼。

目标是扩展WYSIWYG HTML编辑器，以允许用户将某些角度指令插入到任意HTML内容中。我选择了medium-editor及其angular-medium-editor包装器（但如果有更好的解决方案，我不会那么坚持。）

This Plunk 显示如何实例化和激活编辑器指令（使用editable属性）。工具栏已自定义为包含一个按钮，该按钮可在所选文本周围添加自定义指令：<my-custom-directive class="bg-info"> ... </my-custom-directive>。 （为了演示，自定义指令将其内容包装（转换）在一个按钮中，该按钮在单击时触发警报。）

我遇到（重新）编译编辑器内容的问题，以便编辑器中的指令编译。使用$compile(element.contents())(scope)抛出ngTransclusion：使用包含的指令的孤立错误。 （我理解这是因为角度已经在调用编辑器的link函数时进行了转换。）

我不能重构所有可能的自定义指令以不使用转义。

我可以使用什么模式成功编译任意编辑器内容（可能包含许多不同的指令），理想情况是每当内容发生变化时，或者至少在编辑完成时？这是使用$ compile合理的“边缘情况”吗？如果是这样，我该如何使用它？

Answer 1

This question and answer让我意识到这样做的方法是在插入元素时{}向强> 插入元素，而不是重新编译整个部分。

方便地，rangy's classApplier module allows for an onElementCreate callback可用于在添加自定义指令时编译它。

Here's the working plunker.