Add text field using ng-bind-html

Question

I am trying to create a text field inside a "p" tag using ng-bind-html. It is not not rendering input tags, but rendering other tags.

<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.min.js"></script>

</head>

<body>
<div ng-app="ss" ng-controller="formController">
<p ng-bind-html="hh"></p>

</div>

<script>
var myApp = angular.module("ss", ['ngSanitize']);
function formController ($scope) {
    $scope.hh="<b>Hello</b><input type='text'> ";
}
</script>

</body>
</html>

In the output I am getting the bold text "Hello", but not the input field.

(I know I can put the text field directly in the html, but I need this for some reason)

gkalpak · Accepted Answer · 2014-09-18 06:54:39Z

2

It is because ngSanitize considers <input> to be unsafe. If you want to do it anyway, you must explcitly trust it:

.controller('formController', function ($sce, $scope) {
    $scope.hh = $sce.trustAsHtml('<b>Hello</b><input type="text" />');
}

See, also, this short demo.

_{BTW, you should properly register your controllers (using .controller()), because looking them up in the global object has been deprecated in the latest versions of Angular.}

answered Sep 18, 2014 at 6:54

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add text field using ng-bind-html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related