0

Hoping anyone could help...

I am sending an object value like

{"message": "< img src='aaaa' />"} from my node API to AngularJS.

On my client side I wish to call only {{message}} to display the rendered img attribute. Unfortunately, it renders < img src= 'aaaa' />.

I believe since the object value is a string, it renders the whole as a string -- < img src= 'aaaa' >

How to overcome the scenerio? Any help would be appreciated.

Khalid Hussain
  • 1,675
  • 17
  • 25
  • Please see this SO question. It shows you how to bind a string as HTML http://stackoverflow.com/questions/9381926/angularjs-insert-html-into-view – DvideBy0 Oct 18 '16 at 03:27
  • Instead you can even send only src like : {"message": "aaaa"}, and then give it to img in our view. – Jigar7521 Oct 18 '16 at 04:02

3 Answers3

1

You can use ngSanitize to render HTML you have got from the server. It basically sanitizes(determine its safe to render in UI) your HTML before it renders it in UI.

Include angular-sanitize.js in your scripts

<div ng-bind-html="msg.message"></div>

and include ngSanitize as a module dependency.

Plunker

Ravi Teja
  • 1,097
  • 8
  • 13
0

Working Plnkr

You are returning JSON data. As far as I understood, you want to display the key, not the value.

HTML:

 <div ng-repeat="(key, value) in data">
    {{key}}
 </div>

JavaScript:

 $scope.data = {"message": "< img src='aaaa' />"};
Khalid Hussain
  • 1,675
  • 17
  • 25
0

Use $sce.trustAsHtml() in the controller to convert the html string.

$scope.datas=$sce.trustAsHtml($scope.data.message);

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

<div ng-bind-html="datas">

Check this demo

Tojo Paul Mangaly
  • 196
  • 1
  • 11