Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to print html string as html

If just for example I do:

var = "<a>Asd</a>";  <span>{{ var }}</span> 

The string is printed like text and not as html, so how do I print the html ?

like image 822
itsme Avatar asked Jan 20 '14 10:01

itsme


People also ask

How do I print a string in HTML?

You should be using ng-bind-html directive. Creates a binding that will innerHTML the result of evaluating the expression into the current element in a secure way.

How do I display HTML as plain text?

You can show HTML tags as plain text in HTML on a website or webpage by replacing < with &lt; or &60; and > with &gt; or &62; on each HTML tag that you want to be visible. Ordinarily, HTML tags are not visible to the reader on the browser.

How do you pass contents of a string in HTML?

html(); // taking the content var res = text. replace('<td contenteditable="true">','<td>'); //trying to replace document. getElementById("output"). innerHTML = res ; //output data }); });


2 Answers

You should be using ng-bind-html directive.

Creates a binding that will innerHTML the result of evaluating the expression into the current element in a secure way.

<ANY ng-bind-html="{expression}">    ... </ANY> 
like image 66
Florian F. Avatar answered Oct 07 '22 20:10

Florian F.


Before using the ng-bind-html directive you must include the $sanitize service or it will throw an error.

Error: $sce:unsafe Require a safe/trusted value Attempting to use an unsafe value in a safe context.

Error: [$sce:unsafe] http://errors.angularjs.org/1.4.5/$sce/unsafe     at Error (native) 

The right way:

<script src="angular.js"></script> <script src="angular-sanitize.js"></script> 
var myApp = angular.module('app', ['ngSanitize']); 
myApp.controller('MyController', ['$scope', function($scope) {   $scope.myHTML = '<a href="#">Hello, World!</a>'; }]); 
<div ng-controller="MyController">  <p ng-bind-html="myHTML"></p> </div> 

https://docs.angularjs.org/api/ngSanitize

https://docs.angularjs.org/api/ng/directive/ngBindHtml

like image 27
Wellington Lorindo Avatar answered Oct 07 '22 19:10

Wellington Lorindo