parse html inside ng-bind using angularJS

Question

parse html inside ng-bind using angularJS

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

javascript
angularjs

Answer 1

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

The examples are shown here

Answer 2

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

Answer 3

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 
});