javascript - 将文本编译为特定范围的 Angular html 并将其渲染为 DOM

Question

我有一些具体要求。我有用于功能的 html 页面(如弹出窗口)。我希望在更改状态时呈现该 html。在这一点上，我所在州特定的 HTML 是不同的。我想要渲染的 Html 应该渲染为 body 的直接子级，并且它包含 Angular 标签，如 ng-click 等。

我想通过调用函数(手动)来加载它。

这对我有用:

$http.get("/myTemplate.html").then(function(response) {
    var raw_html = response.data;

    $('body').append($compile(raw_html)(myScope));
});

但出于安全考虑，我不能使用 $('body').append (jquery append)

所以我从纯 JavaScript 中尝试了它:

$http.get("/myTemplate.html").then(function(response) {
    var raw_html = response.data;
    var element = document.createElement("div"); 
    element.className = 'myClass';
    element.innerHTML = raw_html;
    document.body.appendChild($compile(element)(currentScope));
});

但是$compile返回的内容与appendChild不兼容。

在这种情况下指令可以帮助我吗？

Answer 1

为什么不使用 ng-include。

您可以通过 3 种不同的方式使用它:

<div ng-include="'/myTemplate.html'"></div>
<div ng-include src='/myTemplate.html'"></div>
<ng-include src="'/myTemplate.html'">

如果一定要走另一条路，可以通过element[0]引用dom对象

已编辑

document.body.appendChild($compile(element)(currentScope)[0]);