Angular bind object element to HTML

Question

I got the code from another question and it's straightforward and working fine

<div ng-controller="ExampleController">
<p ng-bind-html="testHTML"></p>
(function(angular) {
  'use strict';
  angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
       $scope.testHTML = 'I am an <code>HTML</code>string with ' +
                         '<a href="#">links!</a> and other <em>stuff</em>';
  }]);
})(window.angular);

Suppose, I'm getting an object and I want to show an element of the object

var obj = {
   title: 'Title',
   description: 'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>'
};
$scope.testHTML = obj;

Then how should I bind only the description on the html end? I've tried and 

plnkr example

Did you assign $scope.testHTML = obj, then var obj = {...} in your code ? — Vo Kim Nguyen
– Vo Kim Nguyen, Commented Sep 8, 2016 at 2:59

Mohit Tanwani · Accepted Answer · 2016-09-08 07:18:00Z

2

Try this snippet to bind HTML

Firstly, you can create custom filter to bind the HTML in AngularJS.

Now, you can use this filter anywhere into the myApp module by just writing yourHTML | html, That will done the job.

var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope','$sce', function($scope, $sce) {
  var obj = {
     title: 'Title',
     description: 'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>',
     description1: 'I am an <b>HTML</b>string with ' +
       '<a href="#">links!</a> and other <u><b>stuff</b></u>'
    
  };
  $scope.testHTML = obj;
  
  //Use $SCE in controller
  var preview_data = obj.description;
  $scope.htmlSafe = $sce.trustAsHtml(preview_data);
  
}]);
//Custom filter (Alternate way)
myApp.filter('html', ['$sce', function ($sce) { 
    return function (text) {
        return $sce.trustAsHtml(text);
    };    
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="GreetingController">
  
  <b>By using custom filter</b>
  <div ng-bind-html="testHTML.description | html"></div>
  <div ng-bind-html="testHTML.description1 | html"></div>

  <br/>
  <b>By using $SCE inside controller</b>
  <div ng-bind-html="htmlSafe"></div>

</div>

edited Sep 8, 2016 at 7:18

answered Sep 8, 2016 at 6:42

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

marukobotto Over a year ago

Console's saying $sce.trustAsHTML is not a function

Mohit Tanwani Over a year ago

I've created the snippet that is working, if you can check that. or provide me your jsfiddle.

Mohit Tanwani Over a year ago

Which version of Angular Js you're using ? it should be 1.2 at least

Mohit Tanwani Over a year ago

@SagnikChakraborti I've updated my answer and added two ways to do this.

marukobotto Over a year ago

Thank You. It's working fine now. Had a problem in my code. However, with ngSanitize iframe wasn't showing. I don't know why but I'm curious. Now it's showing perfectly. :)

|

kwoktung · Accepted Answer · 2016-09-08 03:09:35Z

0

in plnkr example of html file:

change to  as below:

<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
 <p ng-bind-html=testHtml.desc></p>
</div>

answered Sep 8, 2016 at 3:09

kwoktung

6221 gold badge5 silver badges12 bronze badges

Comments

Dennis Tang · Accepted Answer · 2016-09-08 03:23:36Z

0

ng-bind-html doesn't require interpolation as it accepts an expression, so you only need to set it to testHtml.desc without the curly braces {{}}.

In your plunkr's controller you're assigning obj to $scope.testHtml before you declare obj itself, so it won't render anything since obj is undefined at assignment.

Plunkr: https://plnkr.co/edit/GvujCcYdCqLvwwnuEnWp?p=preview

edited Sep 8, 2016 at 3:23

answered Sep 8, 2016 at 3:12

Dennis Tang

2261 silver badge5 bronze badges

Collectives™ on Stack Overflow

Angular bind object element to HTML

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related