How to render an html that came from a json response?

Question

Response from the JSON:

post: {
   body: "<div>O meu html vem dessa forma</div>"
}

I wonder how I do to render this mine post.body in my view. Is there any directive that does this for me???

Answer 1

See this example in fiddle, you will need a Decode in the body variable and an append in the element that will receive html: http://jsfiddle.net/MrPolywhirl/gWcse/

Answer 2

In case you haven’t got it yet, you can use ng-bind-html

Answer 3

With this type of response in HTML format would be necessary to click on the ngSanitize and use the tag for loading ng-bind-html (angular.module('app', ['ngSanitize']);).

Minimal example:

var app = angular.module('app', ['ngSanitize']);
app.controller('ctrl', ['$scope', function($scope) 
{
     $scope.result = '';        
     $scope.submit = function()
     {
         var post = {
            body: "<div>O meu <i>html</i> <b>vem</b> dessa forma</div>"
         }
         $scope.result = post.body;
       
     }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <p ng-bind-html="result"></p>
  <a href="#" ng-click="submit();">Clique para carregar</a>
</div>

_References:

• Angularjs
• ngSanitize