Angularjs Sanitize- trustAsHtml()

http://stackoverflow.com/q/38976527/17447

by karthick Chandran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-sanitize.js"></script>
<div class="container" ng-app="app" ng-controller="DemoController">
    <div class="row">
        <div class="col-md-6">
			<label class="control-label">Decoded HTML</label>
			<span ng-bind-html="encodedData"></span>
        </div>
        <div class="col-md-6">
			<label class="control-label">Encoded HTML</label>
			<span ng-bind-html="decodedData"></span>
        </div>
    </div>
</div>

CSS

.col-md-6 {
	border: 1px solid #bbb;
}

JavaScript

var app = angular.module("app", ['ngSanitize']);
app.controller("DemoController", ["$scope", "$sce", function($scope, $sce) {
let encoded = "&#x3C;li&#x3E;list one&#x3C;\li&#x3E;&#x3C;a href&#x22;#&#x22;&#x3E;link &#x3C;/a&#x3E;"
   // let encoded = "&lt;p&gt;don't&nbsp;do&nbsp;&lt;em&gt;that&lt;/em&gt;&lt;/p&gt;"
//	+"&lt;br/&gt;&lt;p&gt;Try this&lt;/p&gt;";
	$scope.encodedData = $sce.trustAsHtml(encoded);
	
	//angular hack to html decode
	let decoded = angular.element('<div />').html(encoded).text();
	$scope.decodedData = $sce.trustAsHtml(decoded);
}]);