Use the directive ng-bind-html
to display HTML content:
<span ng-bind-html="variavel"></span>
If the $sce service is enabled, you will need to mark the HTML content as reliable. In this case, implement a filter that will be attached to the pipeline:
var app = angular.module('sampleApp', []);
app
.filter('trustAs', function($sce) {
return function (input, type) {
if (typeof input === "string") {
return $sce.trustAs(type || 'html', input);
}
return "";
};
})
.controller('SampleController', function ($scope) {
$scope.variavel ='<b>teste</b> de HTML';
});
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-resource.js"></script>
<div ng-app="sampleApp">
<div ng-controller="SampleController">
<span ng-bind-html="variavel | trustAs"></span>
</div>
</div>
Sources:
ngBindHtml - Angularjs Directive Components
https://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html
That’s right, it worked. I couldn’t make it work here because I have $sce activated and I didn’t know I had to do all this code.
– Bernardo Kowacic
@Bernardokowacic actually only needs to be set once, and can be reused in other parts of the code. I’m glad it worked!
– OnoSendai