是否有一种方法可以从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>
知道怎么做到这一点?任何建议都非常感谢。
干杯:)
答案 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
属性并将其分配给变量
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提供的示例。