AngularJS showing html scope as raw text

Question

i'm using an API to get my posts of my blog. But i'm getting the content that's a HTML code but i'm trying to see it as i saw in the blog but aren't working. I had tried it using this filter and functions:

.filter('unsafe', function($sce) {
return function(val) {
    return $sce.trustAsHtml(val);
};
})

And in controller:

function htmlDecode(input){
  var e = document.createElement('div');
  e.innerHTML = input;
  return e.childNodes[0].nodeValue;
}

In the template:

<div ng-bind-html="post.conteudo | unsafe"></div>

But this codes aren't making this work properly. As result of this, i get a raw/plain text like this:

What can i do?

Have you injected the filter dependency into the controller for the relevant html template? — Soggiorno, Jul 09 '16 at 20:04
Like this: `.controller('PostCtrl', function($scope, unsafe, API, $http, $stateParams, $sce)` ? — Lucas Müller, Jul 09 '16 at 20:07
You need to tag on filter. unsafeFilter. Is the filter defined in the same module as the controller? — Soggiorno, Jul 09 '16 at 20:12
You could try using the filter directly in the controller instead of the html and see if that makes any difference. See this answer: http://stackoverflow.com/questions/14302267/how-to-use-a-filter-in-a-controller — Soggiorno, Jul 09 '16 at 20:15
I did: `$scope.post.conteudo = $filter('unsafe')(htmlDecode(conteudo));` but it had showed the same thing. — Lucas Müller, Jul 09 '16 at 20:20
Does the filter actually get called? Try placing a console log statement inside the filter return function and see what happens . — Soggiorno, Jul 09 '16 at 20:23
It isn't being called. I put the full code (see code after line 97) of my controllers.js at [here](https://ghostbin.com/paste/95mvz) to you see. — Lucas Müller, Jul 09 '16 at 20:31
I can't see any problem with the code. Could you post a demo with the html as well? https://plnkr.co/ — Soggiorno, Jul 09 '16 at 20:56
Dude, i followed this [snippet](http://stackoverflow.com/a/38172495/6195300) on my another question. The snippet is working but when putted in action or in my code didn't work. — Lucas Müller, Jul 09 '16 at 21:00

score 0 · Answer 1 · answered Jul 09 '16 at 22:42

You are overcomplicating things. You don't need this filter, as well as htmlDecode function. All you need is $sce.trustAsHtml:

$scope.post.conteudo = $sce.trustAsHtml('<b>Thomas Mann</b>');

and in HTML:

<div ng-bind-html="post.conteudo"></div>

 angular.module('demo', []).controller('DemoController', function($scope, $sce) {
   $scope.post = {}
   $scope.post.conteudo = $sce.trustAsHtml('<b>Thomas Mann</b>')
 })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="demo" ng-controller="DemoController">
  <div ng-bind-html="post.conteudo"></div>
</div>

Ok, but the 'conteudo' are like this: `<p><strong>Você tem um site e deseja um certificado SSL gratuitamente?<\/strong><\/p>\r\n\r\n<p>Se a resposta é`. If I do as you said, happens the same: shows the formatted HTML as a plain text. — Lucas Müller, Jul 10 '16 at 02:38

AngularJS showing html scope as raw text

1 Answers1