Question

我一直在尝试使用transclusion创建一个指令，该指令生成它的两个副本的内容并将它们附加到原始模板中。我在尝试修改这两个副本之前没有尝试修改这些副本，我认为这是因为我误解了翻译是如何工作的。

我还有另一个问题，我认为这个问题无法回答，因为我觉得这个前提可能是错误的。

Transclude function needs to modify clone properly

我需要对此采取一种新的方法，我想知道在编译函数中放弃转换并弄脏它是否合理。

我的新问题是，您是否可以获取＆＃34; elem＆＃34;的内容，使用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>

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

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

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

如果我能更详细地解释一下，请询问。

非常感谢。

修改

我试过在下面的Plunkr中做到这一点

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

我有一些问题：

A）我在控制台中遇到JS错误 - TypeError：无法读取属性＆＃39; childNodes＆＃39;未定义的

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中，通过仅编译表单元素，当子代码转换在表单之外时，它会起作用。

Answer 2

此羽毛球在Angular 1.5之前引入了Tranclusion。

link: function(scope, element) {
      if (!element.find('ng-transclude').children().length) {
        element.find('button').append('<b style="color: red">Button1</b>');
      }
    }

Plunker

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

2 个答案: