rendering HTML da stringa a 500x500 dimensioni div

Question

Sono avere alcuni contenuti HTML in angularjs array:

var HTMLs = []; 

HTMLs è una matrice di stringhe con i seguenti contenuti HTML in esso.

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

voglio avere visualizzazione anteprima immagine di questi testi HTML dopo il rendering in un div di dimensioni 500x500 per ogni contenuto HTML dalla matrice.

Non desidero barre di scorrimento nello div per il rendering HTML. Se il testo HTML è troppo lungo, il rendering di porzioni piccole potrebbe funzionare per me.

Answer 1

È possibile estrarre la parte html richiesta dalla stringa del foro utilizzando il metodo getElementById e assegnarlo al div.

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

oppure è possibile utilizzare ng-bind-html nel codice HTML:

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

A questo punto si otterrebbe un tenta di utilizzare un valore non sicuro in un contesto di sicurezza errore in modo è necessario utilizzare $ sce per risolvere quello.

$sce.trustAsHtml() 

nel controller per convertire la stringa html.

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

Answer 2

Try This:

Create a function: 

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

del controllore:

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

    $scope.body = Htmls[0]; 
} 

nel codice HTML, associare il valore come questo senso:

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

Se si desidera che questo sia visualizzato solo in 500 * 500 div e qualsiasi altra modifica di progetto che si desidera applicare, utilizzare il proprio CSS personalizzato per questo. Ovviamente dovresti scorrere tutte le stringhe html nel tuo array di input. Ad esempio, ho appena usato un elemento qui.