Insert HTML into view from AngularJS controller

Question

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> 

Answer 1

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.

Answer 2

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'])