如何在Angular JS中向HTML字符串呈现指令？

Question

使用Angular，我试图使用指令动态生成svg。

我有一个名为<svg-directive>的指令，其中的模板包含一个带有一些范围变量的有效xml svg定义。如果我在我的模板中包含<svg-directive></svg-directive>，则显示正常。

在我的页面控制器中，我想检索我的svg指令的编译字符串，其中填充了所有范围变量（目标是通过HTTP POST将此字符串发送到REST API）。

在我的控制器中，我有以下代码：

var compiled = $compile("<svg-directive></svg-directive>")($scope);

$timeout(function() {
    var svgEl = compiled[0].querySelector("svg");
    var svgStr = new XMLSerializer().serializeToString(svgEl);
    console.log(svgStr);
}, 0);

当我第一次加载此控制器时，我得到：

TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'.

在var svgEl = compiled[0].querySelector("svg");行。

但是，一旦在页面上，如果我单击刷新，则错误消失并且svgStr内容已成功记录到屏幕上。

我的问题是：如何在第一次加载控制器时让指令HTML正确序列化？

PS。任何改进我的方法来获得指令呈现HTML的建议也是受欢迎的。