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. In that I've noticed that when I bind html tags with <a>, <strong>, etc.. it works. But I am unable to add <input> tags to it.

Meaning, this works:

$scope.myHtml = '<strong>This is <a hreaf="#">Something</a></strong>';

Template:

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

But this doesnt work:

$scope.myHtml = '<input type="text" />';

Template:

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

The above is just a simplified sample for demonstration purpose only. My question is:

1) Does tags not work with ng-bind-html directive?

2) If not, how can I html bind a input tag so I can insert it inside the view?

Laze

It probably doesn't, html is sanitised before it is inserted, and I would guess input is considered unsafe. Why do you need to do this. It looks messy and I'm sure there is a better way using templates or directives. – Xavierxaviera

I am actually trying to use this inside a complicated directive that constructs the html tags for input based on the attribute selection and then use this inside a template that it is getting via $http get. – Laze

Are you using the compile function in that directive? – Xavierxaviera

yeah.. it compiles it at the end. – Laze

when I was searching now, I just happened to come across $sce.trustAsHtml() function. I think it may work. Gonna give that a try and will update soon. :) – Laze

Ok. If not I still think you could do this without having to use ng-bind-html or similar by declaring the compile function in the directive's directive definition object and mutating the template in there. – Xavierxaviera

aha...thats interesting. i will give your suggestion a try. – Laze

hi @EdHinchliffe when you suggested to declare the compile function in the directive's directive definition, did you refer to something like wickY26 example below? – Laze

Sorry for the delay. I didn't mean exactly how @wickY26 has suggested, but it sounds like you found a solution that works for you now :) – Xavierxaviera

yeah.. @wickY26 's directive method is the one I am using atm. Since that was a directive's directive definition, I thought thats what you had suggested too. Either ways I am glad I didint go with the ng-bind-html for this in the end. :) – Laze

Answer 1

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...

Deejay

LOVING IT! I am going to test out your working sample. Thank you for this awesome example. I will be back with an update once I test it in my app. – Laze

@blackops_programmer see my update as well if you do not want to create a custom directive for that... – Deejay

Thank you heaps for your answers. Using $sce.trustAsHtml() before ng-bind-html did work. However, in the end I went with the directive approch for this after taking your suggestion as well as taking EdHinchliffe and Whisher's recommendation on this. And the better part is I dont even need to use the sanitize module to get this to work. Thank you so much. It took me several hours today searching on this! I am happy that there is a clean method to achieve this. Your Plunker sample above helped a lot. Much obliged! :) – Laze

The directive @wickY26 talked is just the compile directive right here : docs.angularjs.org/api/ng/service/$compile renamed ^^ – Disrate

Wow! just what I was looking for to solve my problem here: click here. Thank you so much! – Swayder

Answer 2

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>

Coenzyme

Answer 3

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

Stingy

I think the ng-bind-html-unsafe doesnt work in the latest version anymore. – Laze

I checked it out with the 1.2.16 version and it works – Stingy