Subhajit Subhajit - 1 month ago 5
AngularJS Question

HTML string sent as object value does not render on client

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.

Answer

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