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

时间:2017-12-16 11:46:38

标签: angularjs templates compilation interpolation

是否有一种方法可以从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>

知道怎么做到这一点?任何建议都非常感谢。

干杯:)

3 个答案:

答案 0 :(得分:2)

是的,您可以使用指令编译 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中编译的指令不会被任何变量参数化,但是您可以更改它(请记住,编译指令模板中使用的所有变量都必须分配给您使用的作用域)

答案 1 :(得分:0)

您可以使用$ sce:

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

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

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

答案 2 :(得分:0)

$compile将HTML字符串或DOM编译到模板中并生成模板函数,然后可以将其用于将scope和模板链接在一起。

如果您的要求是将编译的指令附加到另一个指令中,您可以在link函数中执行此操作。

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

你可以使用$ compile,如上面链接函数中的代码所示。

Plnkr Example提供的示例。