41

I'm having issue with angularJs. My application requests some data from the server and one of the values from the data returned from the server is a string of html. I am binding it in my angular template like this 

<div>{{{item.location_icons}}</div>

but as you might expect what I see is not the icons images but the markup basically the stuff in the div looks like

 "<i class='my-icon-class'/>"

which is not what I want.

anyone know what I can do to parse the html in the transclusion

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
Subtubes
  • 15,851
  • 22
  • 70
  • 105

3 Answers3

41

You want to use ng-bind-html and ng-bind-html-unsafe for that kind of purpose.

The examples are shown here

walen
  • 7,103
  • 2
  • 37
  • 58
Tosh
  • 35,955
  • 11
  • 65
  • 55
  • how would I use this with ng-bind-html I see how I can use ng-bind-unsafe-html not sure if unsafe is a way of suggesting that it is a bad way of doing things. Can you elaborate on the ng-bind-html? The angular docs aren't very clear on this. I tried using it and it didn't work – Subtubes Feb 15 '13 at 05:46
  • 1
    Honestly, I do not know exactly. But my understanding is that sanitizer will remove tags with any external references, such as `href`, `src`, etc... If you are binding user input, then it can be unsafe, but you are binding to your own internal value, I think it is OK to use un-sanitized version. – Tosh Feb 15 '13 at 06:57
  • 10
    `ng-bind-html` is in the `ngSanitize` module, which, like `ngResource` isn't prepackaged with Angular. You'll have to include the script and make sure your app depends on it: `var app = angular.module('app', ['ngSanitize']);`. You'll then have access to the `ng-bind-html` directive, which you can use like: `
    `     – satchmorun Feb 15 '13 at 07:01
  • thank you both for the answers they have been very helpful – Subtubes Feb 15 '13 at 21:50
  • @EdgarMartinez "unsafe" in this context means the source of the data is not trusted (e.g. the html came from user input via a form) – John Strickler Jun 21 '13 at 20:23
  • You can find all the plugins here: http://code.angularjs.org/ – sidonaldson Oct 01 '13 at 10:02
  • Use `ng-bind-html` together with the `$sanitize` provider – Luis Delgado Sep 30 '15 at 14:56
18

As ng-bind-html-unsafe is deprecated, you can use this code instead.

You need to create function inside your controller:

$scope.toTrustedHTML = function( html ){
    return $sce.trustAsHtml( html );
}

and use something like this in your view:

<span ng-bind-html='toTrustedHTML( myHTMLstring )'></span>

Don't forget to inject $sce:

AppObj.controller('MyController', function($scope, $sce) {
    //your code here 
});
Jarlax
  • 1,586
  • 10
  • 20
Mher
  • 985
  • 9
  • 23
8

A better way is to use $compile instead of ng-bind-html-unsafe.

See: http://docs.angularjs.org/api/ng.$compile

Lastly, at the moment, the last version of angularJS (release candidate 1.2.0) do not have any ng-bind-html-unsafe directive. So I really encourage you to consider this option before any future update of your app. ( ng-bind-html-unsafe may/will not working any more...)

http://code.angularjs.org/1.2.0rc1/docs/api/ng.directive:ngBindHtml

Pierre Broucz
  • 687
  • 5
  • 8