javascript - 在 Angular 中使用 JavaScript 添加带有插值的标签

Question

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

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

全部使用 Javascript，如下所示:

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

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

然后它会显示在页面上，双花括号等等。将此单个元素动态添加到我的页面以便识别插值的正确方法是什么？

Answer 1

您必须针对当前范围编译 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);
        }
    }
}]);