Is it possible to create an HTML fragment in an AngularJS controller and have this HTML shown in the view?

This comes from a requirement to turn an inconsistent JSON blob into a nested list of id : value pairs. Therefore the HTML is created in the controller and I am now looking to display it.

I have created a model property, but cannot render this in the view without it just printing the HTML.


Update

It appears that the problem arises from angular rendering the created HTML as a string within quotes. Will attempt to find a way around this.

Example controller :

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

Example view :

<div ng:bind="customHtml"></div>

Gives :

<div>
    "<ul><li>render me please</li></ul>"
</div>
1 upvote
  flag
Also please see this question, asking if it's possible to get scripts in inserted HTML to run. – enigment
upvote
  flag
Is it possible to have multiple objects bound to the same ng-bind? like ``` ng-bind="site.address_1 site.address_2 site.zip" – fauverism
upvote
  flag
if you have a lot of stuff on your page you will have to alter line 15046 of angular.js (insanity) of function htmlSanitizer(html) {.... Angular dev's decided that you should be able to find any html binding by slowly going through all of your pages hidden elements one by one to find that ONE SINGLE missing piece of html. !!! very angry at such an assumption !!! – user3338098
upvote
  flag
Sorry, the chosen answer by Luke may not be the totally right answer. The right answer can be found in another question here. Basically, "ng-bind-html-unsafe only renders the content as HTML. It doesn't bind Angular scope to the resulted DOM. You have to use $compile service for that purpose." – gm2008
upvote
  flag
ng-bind removes all internal html. which is not how filter would work, it's ok when filter is the only value – Muhammad Umer

18 Answers 11

up vote 1038 down vote accepted

For Angular 1.x, use ng-bind-html in the HTML:

<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>

At this point you would get a attempting to use an unsafe value in a safe context error so you need to either use ngSanitize or $sce to resolve that.

$sce

Use $sce.trustAsHtml() in the controller to convert the html string.

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize

There are 2 steps:

  1. include the angular-sanitize.min.js resource, i.e.:
    <script src="lib/angular/angular-sanitize.min.js"></script>

  2. In a js file (controller or usually app.js), include ngSanitize, i.e.:
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

27 upvote
  flag
In Angular 1.2, ng-bind-html-unsafe was removed and the two directives were combined. See: github.com/angular/angular.js/blob/master/… – Sasha Chedygov
56 upvote
  flag
Without using ngSanitize, it can be done now by using $sce. Inject it into the controller and pass the html through it. $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar); Otherwise I kept getting attempting to use an unsafe value in a safe context – Matsemann
3 upvote
  flag
We need a bit of a cleanup here which is the right way nothing seems to be working for me. – landed
9 upvote
  flag
//allinonescript.com/questions/21829275/… <-- worked for me :) none of the options in the answers here worked unfortunately – anpatel
1 upvote
  flag
What if html needs to be inserted into html tag attribute? – Eugene
6 upvote
  flag
Just so people aren't disheartened, the latest update of this answer, coupled with the ngSanitize requirement at the bottom of the answer, does in fact work. – Ben Cull
2 upvote
  flag
Seriously? We need another lib for this to work?? – GôTô
2 upvote
  flag
1) ng-bind-html and then 2) sce.trustAsHtml() .... Is there a way to do it in one step? – Cherven
1 upvote
  flag
Thank you very much. This post saved me a lot of time. Just a note to not forget to include the dependencies, as shown here: docs.angularjs.org/api/ngSanitize/service/$sanitize – VSO
upvote
  flag
Soi what are the required steps to acheiveing the goal? – Dezmen Ceo Sykes
upvote
  flag
used the $sce method and it worked great for me. don't forget to add ng-bind-html="thisCanBeusedInsideNgBindHtml" to your element to generate your content. – Eolis
1 upvote
  flag
Hello XSS :) be sure the content is trusted, not user input for example – mpgn
upvote
  flag
but it does override all existing html so not as useful as filter – Muhammad Umer
upvote
  flag
my $scope is not working inside html {{test}} any solution?? – Parshuram Kalvikatte
upvote
  flag
this works: <div [innerHtml]="someVariableInTheScope"></div> – Juan

I have tried today, the only way I found was this

<div ng-bind-html-unsafe="expression"></div>

5 upvote
  flag
This solution should be used only if the source is trustful to avoid cross-site scripting attacks. – Bema
3 upvote
  flag
As of Angular 1.0.2, this works for me, with no other files or hookup required. – enigment
1 upvote
  flag
Using Angular 1.0.8 and this worked for me. Heed @Bertrand's warning though, be sure you trust the source. – Jack Slingerland
1 upvote
  flag
What if the html is encoded? – Max Favilli
11 upvote
  flag
For future reference ng-bind-html-unsafe was removed in the version 1.2. Now you need the ngSanitize module and to bind unsafe html you should use the $sce.trustAsHtml method. – Lucas Lazaro

on html

<div ng-controller="myAppController as myCtrl">

<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>

OR

<div ng-bind-html="myCtrl.comment.msg"></div

on controller

mySceApp.controller("myAppController", function myAppController( $sce) {

this.myCtrl.comment.msg = $sce.trustAsHtml(html);

works also with $scope.comment.msg = $sce.trustAsHtml(html);

1 upvote
  flag
$sce is neat but couldn't a user just add a breakpoint here and restore any malicious code to this.myCtrl.comment.msg using a debugger? – BradGreens
upvote
  flag
then again BradGreens, would you be able to do the same with ng-bind-html-unsafe as well? – CodeOverRide
4 upvote
  flag
If someone wants to hack there own browser they can, who cares. It won't effect other users. @BradGreens Is that the question? – Chris Stephens
upvote
  flag
@ChrisStephens you're correct. I guess that does answer my question but my opinion is these features are closer to perceived security than real security. Perhaps it protects against some kind of automated attacks? I've never clearly grasped why doing this things really helps the app. My app has to add a filter to EVERY instance of rendering wysiwyg HTML because it could have inline CSS, which ng-bind-html strips out. – BradGreens
1 upvote
  flag
Well these features help with reducing secure coding mistakes. In particular the issue with markup/code injection. By default all bound data is encoded for display. So basically if you want to output markup this forces you to think about what you are trying to do. Without these features you can do a lot with server side security alone but to separate concerns the client app should charge of handling the data correctly for display. – Chris Stephens
upvote
  flag
appreciate the insight – BradGreens

See the answers I posted for you in these two locations:

http://forum.ionicframework.com/t/eval-json-data-as-html/1455/6

http://codepen.io/calendee/pen/DKhbc

upvote
  flag
I didn't see angular used in the second link so didn't try the first. – landed

Angular JS shows HTML within the tag

The solution provided in the above link worked for me, none of the options on this thread did. For anyone looking for the same thing with AngularJS version 1.2.9

Here's a copy:

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>

EDIT:

Here's the set up:

JS file:

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

    }]);

HTML file:

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>
6 upvote
  flag
Be aware that you need to be absolutely sure that the html can be trusted. Otherwise the door is wide open for XSS attacks. – jan.vdbergh
upvote
  flag
upvote
  flag
This solution, using a function to render the HTML, is the only one that worked for me. – MarceloBarbosa
upvote
  flag
what is the '$http' for? – Soldeplata Saketos
upvote
  flag
@SoldeplataSaketos nothing in particular, I think I was trying it locally at the time and I ended up copying the dependency over. – anpatel

You can also create a filter like so:

var app = angular.module("demoApp", ['ngResource']);

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

Then in the view

<div ng-bind-html="trusted_html_variable | trust"></div>

Note: This filter trusts any and all html passed to it, and could present an XSS vulnerability if variables with user input are passed to it.

7 upvote
  flag
Fantastic! And this answer is cleaner and more angular-esk than the others. – snumpy
14 upvote
  flag
Gorgeous. Thank you. This is the correct answer. – Matt
upvote
  flag
@Katie Astrauskas, thank you for the anwer! Very clean way. BTW ngResource dependency is not neccesary. – Athlan
24 upvote
  flag
Only use this when you completely trust the HTML. This does not sanitize the HTML in any way, but only allows Angular to inject it into the page. Malicious HTML can provoke XSS attacks. – jan.vdbergh
upvote
  flag
This one is more clear for me. Also it worked just like posted. – Alfredo A.
upvote
  flag
If performance is important, you should avoid using filters. A filter will trigger two digests each time. – Tantelope
14 upvote
  flag
Why is the filter called sanitize? This is so misleading as it doesn't actually sanitize anything. Instead it should be called trust, trustSafe or something similar. – Denis Pshenov
1 upvote
  flag
Wonderful answer. rawHtml is my name for the filter instead of sanitize. – Wumms
upvote
  flag
@Katie indeed, ['ngResource'] dependency not needed for this, its not a fully sanitation. – misterzik
upvote
  flag
can this be used like: {{ whatever_needs_to_be_sanitized | sanitize }} instead of bound to the element? – tonejac
upvote
  flag
Amazing answer! So simple thank you – Hike Nalbandyan

I found that using ng-sanitize did not allow me to add ng-click in the html.

To solve this I added a directive. Like this:

app.directive('htmldiv', function($compile, $parse) {
return {
  restrict: 'E',
  link: function(scope, element, attr) {
    scope.$watch(attr.content, function() {
      element.html($parse(attr.content)(scope));
      $compile(element.contents())(scope);
    }, true);
  }
}
});

And this is the HTML:

<htmldiv content="theContent"></htmldiv>

Good luck.

Another solution, very similar to blrbr's except using a scoped attribute is:

angular.module('app')
.directive('renderHtml', ['$compile', function ($compile) {
    return {
      restrict: 'E',
      scope: {
        html: '='
      },
      link: function postLink(scope, element, attrs) {

          function appendHtml() {
              if(scope.html) {
                  var newElement = angular.element(scope.html);
                  $compile(newElement)(scope);
                  element.append(newElement);
              }
          }

          scope.$watch(function() { return scope.html }, appendHtml);
      }
    };
  }]);

And then

<render-html html="htmlAsString"></render-html>

Note you may replace element.append() with element.replaceWith()

Fortunately, you don't need any fancy filters or unsafe methods to avoid that error message. This is the complete implementation to properly output HTML markup in a view in the intended and safe way.

The sanitize module must be included after Angular:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

Then, the module must be loaded:

angular.module('app', [
  'ngSanitize'
]);

This will allow you to include markup in a string from a controller, directive, etc:

scope.message = "<strong>42</strong> is the <em>answer</em>.";

Finally, in a template, it must be output like so:

<p ng-bind-html="message"></p>

Which will produce the expected output: 42 is the answer.

1 upvote
  flag
Try some html like <div><label>Why My Input Element Missing</label><input /></div>... If it surprises u then update your answer plz.. Because I tested all 10+vote solutions.. Your solution did'nt work for me to see my input tags.. fine otherwise.. I had use $sce.trustAsHtml(html) – Sami
upvote
  flag
This solution works, care to post a jsfiddle or plunkr? – Pier-Luc Gendreau
upvote
  flag
This should really be the answer if using latest angular – Sandeep
upvote
  flag
Easiest solution here! Thanks! – ganeshk
upvote
  flag
Most correct answer. Thanks. – tigin

you can also use ng-include.

<div class="col-sm-9 TabContent_container" ng-include="template/custom.html">
</div>

you can use "ng-show" to show hide this template data.

upvote
  flag
You sure that this is all you need todo in order to use ng-include? – fauverism
upvote
  flag
yes .. i have tried it out. and if you are using template then use it it the following way - <script type="text/ng-template" id="custom.html"> – Vikash Sharma

there is one more solution for this problem using creating new attribute or directives in angular.

product-specs.html

 <h4>Specs</h4>
        <ul class="list-unstyled">
          <li>
            <strong>Shine</strong>
            : {{product.shine}}</li>
          <li>
            <strong>Faces</strong>
            : {{product.faces}}</li>
          <li>
            <strong>Rarity</strong>
            : {{product.rarity}}</li>
          <li>
            <strong>Color</strong>
            : {{product.color}}</li>
        </ul>

app.js

 (function() {
var app = angular.module('gemStore', []);    
app.directive("     <div ng-show="tab.isSet(2)" product-specs>", function() {
return {
  restrict: 'E',
  templateUrl: "product-specs.html"
};
});

index.html

 <div>
 <product-specs>  </product-specs>//it will load product-specs.html file here.
 </div>

or

<div  product-specs>//it will add product-specs.html file 

or

<div ng-include="product-description.html"></div>

https://docs.angularjs.org/guide/directive

Just did this using ngBindHtml by following angular(v1.4) docs,

<div ng-bind-html="expression"></div> 
and expression can be "<ul><li>render me please</li></ul>"

Make sure you include ngSanitize in the module's dependencies. Then it should work fine.

ng-bind-html-unsafe no longer works.

This is the shortest way:

Create a filter:

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

And in your view:

<div ng-bind-html="customHtml | unsafe"></div>

P.S. This method doesn't require you to include the ngSanitize module.

2 upvote
  flag
This is the best solution I've seen here for Angular 1.2. The solution using $sce in the accepted answer didn't work for me and I didn't want to include a additional dependency for something so trivial. – ACIDSTEALTH
upvote
  flag
The solution by Bidhan Bhattarai worked for me. Angular 1.6.1 – mediaguru
upvote
  flag
this works for me thanks – Nitin

Use

<div ng-bind-html="customHtml"></div>

and

angular.module('MyApp', ['ngSanitize']);

For that, you need to include angular-sanitize.js, for example in your html-file with

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>

As of Angular 4, this is the way that now works:

<div [innerHTML]="htmlString">
</div>

Taken from this question here.

Here's a simple (and unsafe) bind-as-html directive, without the need for ngSanitize:

myModule.directive('bindAsHtml', function () {
    return {
        link: function (scope, element, attributes) {
            element.html(scope.$eval(attributes.bindAsHtml));
        }
    };
});

Note that this will open up for security issues, if binding untrusted content.

Use like so:

<div bind-as-html="someHtmlInScope"></div>

here is the solution 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">

and thank to Ruben Decrop

Working example with pipe to display html in template with Angular 4.

1.Crated Pipe escape-html.pipe.ts

`

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({name : 'keepHtml', pure : false})
export class EscapeHtmlPipe implements PipeTransform{
 constructor(private sanitizer : DomSanitizer){
 }
 transform(content){
  return this.sanitizer.bypassSecurityTrustHtml(content);
 }
}

` 2. Register pipe to app.module.ts

 import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';
    declarations: [...,EscapeHtmlPipe]
  1. Use in your template

        <div class="demoPipe"  [innerHtml]="getDivHtml(obj.header) | keepHtml">

  2. getDivHtml() { //can return html as per requirement}

    Please add appropriate implementation for getDivHtml in associated component.ts file.

Not the answer you're looking for? Browse other questions tagged or ask your own question.