Displaying html via angular - html

Question

I'm trying to show the html that has been encoded. but this doesn't seem to work.
input is via:
<h1>Some header</h1>
and it shows:
<h1>Some header</h1>
But I want it to render the html; but as shown in the following pen; it just show the source html
this is my current controller:
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myCtrl', function ($scope, $sce) {
$scope.trustedHtml = $sce.trustAsHtml('<h1>Some header</h1>');
});
with the following html:
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-bind-html="trustedHtml"></div>
</div>
http://codepen.io/cskiwi/pen/PqXdOa

Answer 1

To decode the html, you can use this trick:
var encodedHtml = '<h1>Some header</h1>';
var decodedHtml = angular.element('<div>').html(encodedHtml).text();
Then apply to your property:
$scope.trustedHtml = $sce.trustAsHtml(decodedHtml);

Answer 2

You will have to sanitize your html data/string :
I have the same problem before some time , then i created a filter for this problem, You can use this filter to do sanitize your html code:
app.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode) {
return $sce.trustAsHtml(htmlCode);
}
}]);
in html you can use like this:
<div ng-bind-html="businesses.oldTimings | sanitize"></div>
businesses.oldTimings is $scope variable having description of strings or having strings with html tags , $scope.businesses.oldTimings is the part of particular controller that you are using for that html.
see in the snapshot:
you can use limitHtml filter to do the same:
app.filter('limitHtml', function() {
return function(text, limit) {
var changedString = String(text).replace(/<[^>]+>/gm, ' ');
var length = changedString.length;
return changedString.length > limit ? changedString.substr(0, limit - 1) : changedString;
}
});
Then you can add bothe filter in your html like that:
<p class="first-free-para" ng-bind-html="special.description| limitHtml : special.description.length | sanitize">
Hope it will work for you.

Answer 3

Check this codepen please
http://codepen.io/anon/pen/xGmaWR
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-bind-html="trustedHtml"></div>
</div>
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myCtrl', function ($scope) {
$scope.trustedHtml = '<h1>Some header</h1>';
});
Angular Docs