AngularJS用指令编译html并将输出作为字符串？

Question

有没有办法从 AngularJS 控制器或服务“编译/插入/任何”带有指令的小型 html 模板，并以字符串形式获得最终的 HTML 输出？

更详细地说，假设我的模板是这样的： var html = '<span my-directive="myVariable"></span>'，并且 my-directive 在操作 myVariable 时添加了额外的 html。

现在，我想编译那个 html $compile(html)({myVariable: myVariable})（不确定它是否是正确的方法），最后得到一个完整的 html 作为字符串作为最终结果：

<span my-directive="myVariable">
 <span>additional content added by my amazing directive while manipulating myVariable</span>
</span>

知道如何实现这一目标吗？任何建议都非常感谢。

干杯:)

Answer 1

是的，您可以使用指令编译 HTML（并为该指令提供参数/变量）并最终以字符串形式获得结果

首先我们来看看$compile documentation (Usage section)

我们可以看到 $compile 参数是

要编译成模板函数的元素或 HTML 字符串。

在你的情况下是var html

返回值为

用于将模板（DOM 元素/树）绑定到作用域的链接函数

$compile 正在返回一个 需要作用域作为参数的函数

scope 是一个特殊对象，因此您的 {myVariable: myVariable} 无效，如果您想将变量传递给编译，您必须将此变量分配给您当前的范围 scope.myVariable = myVariable 并且此范围必须作为参数提供给链接函数$compile(html)(scope)

现在我们必须检查链接函数返回的内容：

调用链接函数返回模板的元素

瞧！ - 我们有Element Object，所以我们可以获取它的outerHTML 属性并将其分配给一个变量

在PradeepPlunker你可以改

var str = '<div my-directive>Hello world</div>'
var com = $compile(str)(scope);
element.append(com);

到

var str = '<div my-directive>Hello world</div>'
var com = $compile(str)(scope);
console.log('outerHTML',com[0].outerHTML);
element.append(com[0].outerHTML);

在控制台中查看结果 :)

注意：在 Plunker 中编译的指令不是由任何变量参数化的，但您当然可以更改它（请记住，编译指令模板中使用的所有变量都必须分配给您编译的范围）

Answer 2

您可以为此使用 $sce：

$scope.variable = $sce.trustAsHtml(yourHtmlString);

然后在你的html中你需要使用：

<div ng-bind-html="variable"></div>

Answer 3

$compile 将 HTML 字符串或 DOM 编译成模板并生成模板函数，然后可以使用该函数将 scope 和模板链接在一起。

如果您的要求是将编译后的指令附加到另一个指令中，您可以在 link 函数中完成。

var str = '<div my-directive>Hello world</div>'
var com = $compile(str)(scope);
element.append(com);

您可以在链接函数中使用如上代码所示的$compile。

Plnkr Example 提供的示例。