在Angular中使用JavaScript附加插值标记

I've got a testing routine that creates a div tag, appends it to the body, and then sets its innerHTML property to:

我有一个测试例程,它创建一个div标签,将它附加到正文,然后将其innerHTML属性设置为:

<p>{{testVar}}</p>

All with Javascript, like so:

全部使用Javascript,如下所示:

var created = document.createElement('h1');

var elem = document.body.appendChild(created);
elem.innerHTML='<p>{{testVar}}</p>';

It then shows up on the page, double curly brackets and all. What is the correct way to dynamically add this single element to my page so that the interpolation is recognized?

它然后显示在页面上,双花括号和所有。将此单个元素动态添加到页面的正确方法是什么,以便识别插值?

1 个解决方案

#1

You have to compile the HTML against the current scope, you can use a directive:

您必须针对当前范围编译HTML,您可以使用指令:

app.directive("myDynamicHtml", ["$compile", function($compile) {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var compiledHtml = $compile("<h1><p>{{testVar}}</p></h1>")(scope);
            document.body.appendChild(compiledHtml);
        }
    }
}]);