How to output html through AngularJS template?
Solution 1
So the fix is this:
include angular-sanitize.min.js
from http://code.angularjs.org/ and include it in your module:
var app = angular.module('app', ['ngSanitize']);
and then you're free to use ng-bind-html
Solution 2
I know it's an older question, but you can also trust the value using $sce
in your controller:
$scope.revision.content = $sce.trustAsHtml($scope.revision.content);
After that, ng-bind-html
will work.
Solution 3
I created an ng-html
directive that does the same basic thing that ng-bind-html-unsafe
used to do. However, I strongly suggest that you only use it with caution. It could easily open your site up to malicious attacks. So know what you're doing before you implement it:
.directive('ngHtml', ['$compile', function($compile) {
return function(scope, elem, attrs) {
if(attrs.ngHtml){
elem.html(scope.$eval(attrs.ngHtml));
$compile(elem.contents())(scope);
}
scope.$watch(attrs.ngHtml, function(newValue, oldValue) {
if (newValue && newValue !== oldValue) {
elem.html(newValue);
$compile(elem.contents())(scope);
}
});
};
}]);
And then you would use it as:
<div ng-html="revision.content"></div>
Hope that helps.
Solution 4
What version are you using?
If you are using less than 1.2 you can try ngBindHtmlUnsafe
Xeen
Updated on November 08, 2020Comments
-
Xeen over 3 years
<h1>{{ revision.title }}</h1> <div ng-bind-html="revision.content"></div>
The title outputs fine, but the content - doesn't. It's got some html in it and I get the following error:
Attempting to use an unsafe value in a safe context.
which is being described as so: http://docs.angularjs.org/error/$sce:unsafe and that's fine, but then how can I output the content as there will be some html in it and so I must set it to{{ revision.content | safe }}
or smthn. What is the correct way?EDIT:
AngularJS version: 1.2