使用ng-bind-html添加文本字段

时间:2014-09-18 06:24:09

标签: javascript html angularjs

我正在尝试在" p"内创建一个文本字段。使用ng-bind-html标记。它不是渲染输入标记,而是渲染其他标记。

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

在输出中,我得到粗体文字&#34; Hello&#34;,但不是输入字段。

(我知道我可以将文本字段直接放在html中,但出于某种原因我需要这个)

1 个答案:

答案 0 :(得分:2)

这是因为ngSanitize认为<input>不安全。 无论如何你想要这样做,你必须信任它:

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

另请参阅此 short demo


<子> 顺便说一下,你应该正确注册你的控制器(使用.controller()),因为在最新版本的Angular中已经弃用了在全局对象中查找它们。