11

// json is like this 

"_unparsedString": "<p>test<\/p>"

// HTML 

<div>Preamble : '{{item2._unparsedString}}'</div>

//Output 

Preamble : <p>test<\/p>

but how to render that tag and display it using angular ?

//Output should be like this

 Preamble : test
Shasha
  • 669
  • 1
  • 8
  • 26

2 Answers2

21

Instead of passing string to view directly, you should use sce.trustAsHtml to pre-process the html.

$scope.bindHTML = $sce.trustAsHtml(item2._unparsedString);

Then in your view template, use ng-bind-html to handle html binding.

<div>Preamble : <div ng-bind-html="bindHTML"></div></div>

As you mentioned you have an array of object, it's not that easy to cast them in your controller, you can bind $sce to your $scope then call trustAsHtml in your view

So in your controller

myapp.controller('mainController', function ($scope, $http, $filter, $sce) {
   $scope.$sce = $sce;
...
}

Then in your html view

<div>Preamble {{$index+1}} : <span ng-bind-html="$sce.trustAsHtml(item1.Preamble._unparsedString)"></span></div>
Rebornix
  • 5,272
  • 1
  • 23
  • 26
  • i'm having array of objects..so how to apply it bcoz its not a single value..and i have to apply inside a ng-repeat – Shasha Jul 10 '15 at 05:38
  • @Flash check out my update. You can just inject `$sce` into your controller. – Rebornix Jul 10 '15 at 05:45
  • 2
    @Flash see https://jsfiddle.net/1joo0j77/5/ run the project, pick "Markets" in second select box. You can see the result. – Rebornix Jul 10 '15 at 05:56
5

Please check this working example: http://jsfiddle.net/Shital_D/b9qtj56p/6/

Download file - angular-sanitize.js and include it in your app.

var app = angular.module('myApp', ["ngSanitize"]);       

app.controller('myController', function($scope,$compile) {
    $scope.html = '<p>Your html code</p>';
});

<div ng-app="myApp">
     <div ng-controller="myController">
     <p ng-bind-html="html"></p>
</div>

User2
  • 1,293
  • 8
  • 17