Angularjs – inject html into views

In AnjularJs there are many ways to inject html code into your view. In building front end MVC views it is much needed requirement to inject html into views. In some situations we need to prepare the html string back in the server and send it as a string to client side. One example I came across was show review ratings. A simple method of injecting HTML into view in AngularJs documentation is as follows;

How to use Angular directive ng-bind-html

In simple terms assume you are creating a angular view as follows;

<div ng-controller="ExampleController">
 <p ng-bind-html="myHTML"></p>
 </div>

Javascript code will like below;

angular.module('bindHtmlExample', ['ngSanitize']) 
.controller('ExampleController', ['$scope', function($scope) {
   $scope.myHTML = 'I am an <code>HTML</code>string with ' + '<a href="#">links!</a> and other <em>stuff</em>';
 }])

In order to work ngSanitize you need to include the reference of the “angular-sanitize.js” You can use following CDN link.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-sanitize.min.js"></script>

But the real issue comes up when you are using this method with ng-repeat loop. It does not apply css properly. This was found while I was developing a review and rating display.

The html string I was trying to inject through ng-repeat loop was as follows;

<div class="star-rating-small" style="float: left;">
<span class="hidden">4</span><span class="hidden">1</span>
<div class="current-rating" style="width: 76px;"></div>
</div>

The controller code was like below

<div id="myDiv4" class="slidetabs" ng-controller="LatestReviewsCtrl" style="width: 0px; height: 0px">
 <h2> Reviews</h2>
 <table ng-repeat="lv in reviews">
 <tr>
   <td width="50%">
     <img alt="" ng-src="{{domainname}}{{lv.mainimage}}" class="img-responsive" /></td>
   <td>
     <h3>{{lv.name}}</h3>
     <address>{{lv.address}}</address>
     <div>Written by : {{lv.user}}</div>
     <div>{{lv.rating}}</div>on<div>{{lv.tdate}}</div>
 </td>
 </tr>
 <tr>
 <td colspan="2">
 {{lv.comments}}
 </td>
 </tr>
 </table>
 </div>

And the javascript is as follows; Here I’m using ngSanitize directive

var app = angular.module('schApp', ['ngSanitize'])
.controller('WhatsNewCtrl', function ($scope, $http) {
 $scope.newrest = [];
 $scope.domainname = strdomain;
 $scope.loading = false;
 $http.get(strdomain + '/MobileSearch.asmx/WhatsNew', { params: { CityId: '1', SearchCriteria: '' }, contentType: "application/json; charset=utf-8" }).success(function (data, status, headers, configs) {
 $scope.newrest = data; 
 $scope.loading = true;
 });
})

But due to some reason it compiles the html string the way I want. So I had to find alternatives to fix the problem. Did search on the internet and found a solution. Solution was to add a filter function and use Strict Contextual Escaping (SCE). What happens here is angular application allows the user to render arbitrary HTML into the DIV. Lets see how it works.

Using Angular filter functions to inject html into view

In the javascript app code add the following filter code;

.filter("injectHtml", ['$sce', function ($sce) {
 return function (htmlCode) {
 return $sce.trustAsHtml(htmlCode);
 }
} ]);

In the view change it as follows;

<div id="myDiv4" class="slidetabs" ng-controller="LatestReviewsCtrl" style="width: 0px; height: 0px">
 <h2> Reviews</h2>
 <table ng-repeat="lv in reviews">
    <tr>
      <td width="50%">
        <img alt="" ng-src="{{domainname}}{{lv.mainimage}}" class="img-responsive" /></td>
      <td>
         <h3>{{lv.name}}</h3>
         <address>{{lv.address}}</address>
         <div>Written by : {{lv.user}}</div>
         <div ng-bind-html="lv.rating | injectHtml"></div>on<div>{{lv.tdate}}</div>
     </td>
   </tr>
 <tr>
    <td colspan="2">
      {{lv.comments}}
    </td>
 </tr>
 </table>
 </div>

If you carefully look at ng-bind-html directive you can see the difference. It uses the bind html directive together with injectHtml filter function. Filter function function uses Strict Contextual Escaping (SCE) trust html method to return the correct rating values formatted in css.

This filter function fixed the css formatting while inject html code through ng-repeat loop.