javascript - 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?

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