angularjs – 在模板中非法使用ngTransclude指令

这意味着当你调用$ compile(clone.children()[0])(scope)时，clone.children()[0]是< panel>在这种情况下已经被角度变换了。
clone.children()已经变成：

< divng-transclude =“”> fsafsafasdf< / div>

(面板元件已被移除并更换)。

你正在编辑一个正常的div与ng-transclude是一样的。当您使用ng-transclude编译正常的div时，角度抛出异常，如文档中所述：

This error often occurs when you have forgotten to set transclude:
true in some directive definition,and then used ngTransclude in the
directive’s template.

DEMO(检查控制台看输出)

即使您设置replace：false来保留您的< panel>，有时您会看到这样的转换元素：

< panel class =“ng-scope”>< divng-transclude =“”>< divng-transclude =“”class =“ng-scope”>< divng-transclude =类= “NG-范围” > fsafsafasdf< / DIV>< / DIV>< / DIV>< /面板>

这也是有问题的，因为ng-transclude是重复的

DEMO

为了避免与角度编译过程冲突，我建议设置< panel1>的内部html作为模板或templateUrl属性

您的HTML：

<div data-ng-app="app">
        <panel1>

        </panel1>
    </div>

你的JS：

app.directive('panel1',function ($compile) {
            return {
                restrict: "E",template:"<panel><input type='text' ng-model='firstName'>{{firstName}}</panel>",}
        });

正如你所看到的，这个代码很干净，因为我们不需要手动处理元素。

DEMO

更新了一个解决方案来动态添加元素，而不使用模板或templateUrl：

app.directive('panel1',template:"<div></div>",link : function(scope,element){
                    var html = "<panel><input type='text' ng-model='firstName'>{{firstName}}</panel>";
                    element.append(html);
                    $compile(element.contents())(scope);
                }
            }
        });

DEMO

如果你想把它放在html页面上，确保不要再编译它：

DEMO

如果您需要为每个孩子添加一个div。只需使用开箱即用的转义。

app.directive('panel1',replace:true,template:"<div><div ng-transclude></div></div>" //you could adjust your template to add more nesting divs or remove 
            }
        });

DEMO(您可能需要根据需要调整模板，删除div或添加更多div)

基于OP的更新问题的解决方案：

app.directive('panel1',template:"<div ng-transclude></div>",attrs) {
                    elem.children().wrap("<div>"); //Don't need to use compile here.
                   //Just wrap the children in a div,you could adjust this logic to add class to div depending on your children
                }
            }
        });

DEMO