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属性并将其分配给变量

在Pradeep Plunker中，您可以更改

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提供的示例。

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

3 个答案: