Angular JS shows HTML within the tag

Question

I am trying to insert HTML inside template using ng-bind-html-unsafe attribute. But for some reason its not working.

My code:

<tr class="white two-button" ng-repeat="(key,value) in recommendations | ojoScoreFilter:ojoScore | relevancyScoreFilter:relevancyScore | orderBy:predicate:reverse">
<td>
<div ng-bind-html-unsafe="value.button"></div>
</td>
</tr>

I am not able to see the HTML. If I change ng-bind-html-unsafe="value.button" to ng-bind-html-unsafe="{{value.button}}" then it shows HTML but within the attribute, something like this:

<div ng-bind-html-unsafe="&lt;a class=&quot;action_hrefs full-width bgcolor10 purple-hover flat-button flat-white-button btn&quot; data-value=&quot;947&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-lock&quot;&gt;&lt;/i&gt;&nbsp;Unlock&lt;/a&gt;"></div>

Rachele

Try to include 'ngSanitize' module in your module and ng-bind-html in your mark up – Neogothic

what version of angular are you using? ng-bind-html-unsafe was removed in Angular version 1.2. – Diez

@DavinTryon I am using 1.2.9 – Rachele

Check out ng-bind-html then. You need to use this directive in conjunction with $sce service. – Diez

Answer 1

Ok I found solution for this:

JS:

$scope.renderHtml = function(html_code)
{
    return $sce.trustAsHtml(html_code);
};

HTML:

<p ng-bind-html="renderHtml(value.button)"></p>

Rachele

Woah this is the only one that worked! I've tried everything, thank you :) – Collimate

This is the only solution that worked for me as well. Be sure to inject $sce into your controller. – Recently

This works, but seems a bit overkill. I have to inject $sce into every controller? And have to add that renderHtml function to every controller that needs html? – Horrified

This is the only solution that worked for me too. The accepted answer found in this other SO post: #9382426 did NOT work. – Devilfish

In order for this to work, make sure to inject $sce into the function defined in the controller, something like this: myApp.controller('myCtrl', function($scope, $sce) { – Katerinekates

This really worked for me and to help @AndrewGee, instead to add the $sce on all controllers, you just make it available on your main controler like $scope.$sce = $sce ... doing this, you can just call $scope.$sce anywhere you want, because, this is already available and exposed on your scope. – Oxime

Another smart thing to do... is to add $scope.renderHtml on your main scope with $id 002... and just call this function any time you need – Oxime

@Griiettner can you elaborate on that? – Bullfinch

It's already been mentioned the $sce service needs to be invoked by the controller, i.e.: myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) { /* ... */ }]); but, to be clear: you also need to include the ngSanitize module in your javascript on the page and in your app declaration: myApp = angular.module('myApp', ['ngSanitize','myCtrl']); – Armington

Answer 2

make a filter like this

.filter('trusted',
   function($sce) {
     return function(ss) {
       return $sce.trustAsHtml(ss)
     };
   }
)

and apply this as a filter to the ng-bind-html like

<div ng-bind-html="code | trusted">

Pleuropneumonia

The accepted answer above got a lot of votes but I think this solution is a better answer. Doing it this way will solve the issue of having to inject $sce into every controller that will display html. I'm still new at this though, so feel free to correct me! – Electret