从500x500大小的div中的字符串渲染HTML

Question

我在angularjs数组中有一些html内容:

var HTMLs = [];

HTMLs 是一个字符串数组,其中包含以下HTML内容.

<p><img src="http: //www.pw.com/Emblems/598e97fa05454766902650b4c01d7645.jpg" style="width: 25%;" /><p>

---

<p><span style="font-weight: bold;">This is a sample heading.</span></p><p><span style="font-weight: bold; text-decoration: underline;">Some content without any image.</span></p>

我希望在对阵列中的每个html内容进行大小为500x500的div渲染后,显示这些HTML文本的显示预览图像.

我不希望任何滚动条,div用于HTML渲染.如果HTML文本太长,那么小部分渲染对我有用.

Answer 1

您可以使用 getElementById 方法从洞字符串中取出所需的 html 部分，并将其分配给 div。

var xSection = document.getElementById("sectionid");
document.getElementById("divid").innerHTML = xSection.innerHTML;

或者您可以在 HTML 中使用ng-bind-html ：

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

此时，您将收到尝试在安全上下文中使用不安全值的错误，因此您需要使用$sce来解决该问题。

    $sce.trustAsHtml() 

在控制器中转换 html 字符串。

    $scope.anyVariable = $sce.trustAsHtml(someHtmlVar);