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);

Answer 2

试试这个：

Create a function:

$scope.renderHtml = function(html_code)
{
   return $sce.trustAsHtml(html_code);
};

你的控制器：

angular.module('HtmlRenderModule').controller('HtmlRenderController', ['$scope', '$http', '$sce',
function ($scope, $http, $sce) {
    $scope.renderHtml = function (htmlCode) {
        return $sce.trustAsHtml(htmlCode);
    };

    $scope.body = Htmls[0]; 
}

在HTML中，像这样绑定值：

＆＃13;

 <div ng-controller="MyController">
        <div  ng-bind-html="renderHtml(body)"></div>
    </div>

＆＃13;

如果您希望这只能在500 * 500 div中呈现，并且您想要应用任何其他设计更改，请使用您自己的自定义CSS。显然你应该遍历输入数组中的所有html字符串。我刚刚在这里使用了一个元素。

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

2 个答案: