javascript - 是否可以在不使用嵌入的情况下编译修改后的指令模板？

Question

我一直在尝试使用嵌入来创建一个指令，该指令制作其内容的两个副本并将它们附加到原始模板中。在将这两个副本放回 DOM 之前，我尝试修改它们的尝试失败了，我认为这是因为我误解了嵌入的工作原理。

我这里还有一个问题，我认为这个问题不会得到回答，因为我认为前提可能是错误的。

Transclude function needs to modify clone properly

我需要对此采取新的方法，我想知道放弃嵌入并在编译函数中亲自动手是否明智。

我的新问题是，您能否获取“elem”的内容，使用 JQlite 制作几个副本，然后根据指令的父范围手动编译它们并将它们添加回原始模板？

所以，如果我的工具栏指令是这样使用的，工具栏标签的内容可以是用户想要的任何 HTML...

<div ng-controller="myController">
    <toolbar>
        <form name="formName" submit="myController.submit()">
            <div>
                ... some controls...
            </div>
        </form>
    </toolbar>
</div>

指令的模板是这样的......

<toolbar-inner>
    <div class="toolbar">
        <div transclude-main></div>
    </div>
    <div class="overflow">
        <div transclude-overflow></div>
    </div>
</toolbar-inner>

我的工具栏指令编译函数需要获取元素内容的副本，克隆它，重命名任何表单，这样我们就没有重复的表单名称，然后针对父 Controller 编译一个副本并将其插入然后主插槽对第二个副本执行相同操作并将其插入溢出插槽。

关键是在它的最后我应该有一个指令和它的内容的两个副本，我的 Controller 应该有两个表单 - myController.formName 和 myController.formName2

如果我在这里没有正确解释某些内容，请告诉我。我很确定这里的解决方案不应该涉及嵌入，因此发布第二个问题。它不是重复的。

如果我能更详细地解释任何事情，请询问。

非常感谢。

编辑:

我已经尝试在下面的 Plunkr 中做到这一点

https://plnkr.co/edit/eUIdaPiOIISDdXGLBTKJ?p=preview

我有几个问题:

A) 我在控制台中收到 JS 错误 - 类型错误:无法读取未定义的属性“childNodes”

B) 我假设我可以在预编译阶段弄乱模板，并用新的 HTML 替换指令的内容，新的 HTML 由一个新模板与原始内容的两个副本合并而成。我可以看到我必须针对 $parent 范围编译它们，因为我的指令使用隔离范围(尽管在这个缩减示例中不是绝对必要的)

C) 我在替换指令元素的原始内容时遇到另一个错误。

我想我已经完成了一半，希望这个笨拙的东西能展示我想要实现的目标，但我已经用尽了知识。

为了完整起见，这里是我尝试使用嵌入来完成它的插件，但它没有用，因为当我开始在 transclude 函数中处理它们时，被嵌入的内容已经编译好了。

https://plnkr.co/edit/XE7REjJRShw43cpfJCh2?p=preview

你可以在我之前的问题中看到关于这个的完整对话:

Transclude function needs to modify clone properly

Answer 1

我让您嵌入的示例正常工作。参见 here .

我必须调用下面的方法才能使其正常工作。

$compile(clone)(scope.$parent);

对于 ngTransclude:orphan 问题，在这个 version通过仅编译表单元素，当子元素嵌入在表单之外时它可以工作。