Rendering HTML from string in 500x500 size div

Question

I've have some html contents in angularjs array:

var HTMLs = [];

HTMLs is a string array with following HTML content in it.

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

I want to have display preview image of these HTML texts after rendering in a div of size 500x500 for each html content from the array.

I don't want any scroll bars in the div for HTML rendered. If the HTML text is too long then small portion rendering would work for me.

Answer 1

You can take out the required html part from the hole string using getElementById method, and assign it to the div.

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

OR you can use ng-bind-html in the HTML:

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

At this point you would get a attempting to use an unsafe value in a safe context error so you need to use $sce to resolve that.

    $sce.trustAsHtml() 

in the controller to convert the html string.

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