ng-bind-html doesnt work for Input tags

Question

I am trying to store a HTML inside a scope variable and then use it in template view. When I was reading how to do this in angular, I came across ng-bind-html.

Answer 1

I would keep the stuff you insert in its own template and use ng-include (http://docs.angularjs.org/api/ng/directive/ngInclude).

Having a angular template (template.html) with the contents:

<strong>This is <a href="#">Something</a></strong>

You can include it with

<p ng-include="template.html"></p>

This results in sth like

<p ng-include="template.html"><span class="ng-scope"><strong>This is <a href="#">Something</a></strong></span></p>

Answer 2

Angular selectively sanitizes certain HTML tags with ng-bind-html

so if you want all the tags you should use ng-bind-html-unsafe instead

but watch out of XSS attacks !

BTW

It's far better to follow the @Ed Hinchliffe piece of advice

Answer 3

you are getting $sce:unsafe error...

this means you should use ng-bind-html-unsafe but newer version of angularjs does not include this directive anymore so you shoud use $sce.trustAsHtml() like this...

$scope.trustedInputHtml = $sce.trustAsHtml('<input type="text" />');

but this way you cannot bind scope variables to your html so best way is writing a directive which can be replace with ng-bind-html-unsafe...

here is working PLUNKER for both $sce and directive examples...