How to render dynamic data using ng-bind-html

Question

I am getting a list of object from service. I used ng-repeat to display json object data in ui.

<div class="agreementPopover" ng-repeat="pm in list">
                <p class="md-subhead robotoMedium bodyFontColor zeroMrgn" >{{pm.des}}</p>
                <p class="md-subhead blackColour btmMrgn" ng-bind-html="pm.html| renderHTML"></p>
            </div>

I created a custom filter to convert my html in trust html.

filter('renderHTML', ['$sce', function($sce) {
           return function(val) {
           return $sce.trustAsHtml(val);
           };
           }])

The issue is dynamic html content is not displaying in my UI.

My Html content is

<a href="http://force.com/PublicKB/articles/FAQ/What-is-the-for-Program/?q=letter+of+credit&l=en_US&fs=RelatedArticle" target="_blank" class="agreementPaymentLink">www.skip.com</a>

Immanuel Kirubaharan · Answer 1 · 2018-02-22T13:24:12.043

1

You have to make sure that your html value in the array to be string format as show below, also you can check this working plunker of your example scenario.

Template:

<div class="agreementPopover" ng-repeat="pm in list">
    <p class="md-subhead robotoMedium bodyFontColor zeroMrgn" >{{pm.des}}</p>
    <p class="md-subhead blackColour btmMrgn" ng-bind-html="pm.html| renderHTML"></p>
</div>

Controller:

$http.get('sample.json').then(function(response){
    $scope.list = response.data;
});

edited Feb 22 '18 at 13:24

answered Feb 22 '18 at 11:50

Immanuel Kirubaharan

1,094
1
11
17

In the example $scope.list is static it means you declared it in controller but in my case I am fetching $scope.list data from server. I don't know why ng-bind-html directive is not rendering my dynamic html. – Java4you Feb 22 '18 at 12:57
Still the rule is applicable of having the html as string format. Have you checked your response html values? – Immanuel Kirubaharan Feb 22 '18 at 13:14
There you go. I've updated my answer to have data from $http response as with dummy data. Please check.. – Immanuel Kirubaharan Feb 22 '18 at 13:25

score 0 · Answer 2 · answered Feb 22 '18 at 11:50

Demo:

angular.module("test",[]).controller("testc",function($scope,$sce) {
$scope.value= $sce.trustAsHtml('<a href="http://force.com/PublicKB/articles/FAQ/What-is-the-for-Program/?q=letter+of+credit&l=en_US&fs=RelatedArticle" target="_blank" class="agreementPaymentLink">www.skip.com</a>')
      

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testc">
<p class="md-subhead blackColour btmMrgn" ng-bind-html="value"></p>
        </div>

So try this

//controller

$scope.sce=$sce;// define `$sce` in your scope object

// html

 <p class="md-subhead blackColour btmMrgn" ng-bind-html="sce.trustAsHtml(pm.html)"></p>

I hope this below discussion will helps you lot

How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

score 0 · Answer 3 · answered Feb 22 '18 at 11:57

Check console for error messages
Check your imports ( angular-sanitize )
Check filter name for typos
Check that module that defines the filter is included in your controller´s or components module

(function(angular) {
  'use strict';
angular.module('trustedFilter', ['ngSanitize'] )
  .filter('renderHTML', ['$sce', function($sce) {
    return function(val) {
      return $sce.trustAsHtml(val);
    };
  }]);
angular.module('bindHtmlExample', ['trustedFilter'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML = '<a href="http://force.com/PublicKB/articles/FAQ/What-is-the-for-Program/?q=letter+of+credit&l=en_US&fs=RelatedArticle" target="_blank" class="agreementPaymentLink">www.skip.com</a>';
  }])
  
})(window.angular);

/*
Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-bind-html-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script>


  
</head>
<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
 <p ng-bind-html="myHTML | renderHTML"></p>
</div>
</body>
</html>

How to render dynamic data using ng-bind-html

3 Answers3

Demo:

So try this