ng-bind-html不适用于输入标记

时间:2014-04-02 10:07:58

标签: javascript angularjs ng-bind-html ng-bind ngsanitize

我正在尝试将HTML存储在范围变量中,然后在模板视图中使用它。当我在阅读角度时如何做到这一点时,我遇到了ng-bind-html。我已经注意到,当我用<a><strong>等绑定html标签时,它可以工作。但是我无法向其添加<input>个标签。

含义,这有效:

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

模板:

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

但这不起作用:

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

模板:

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

以上只是一个简化的样本,仅供演示之用。我的问题是:

1)标签不适用于ng-bind-html指令吗?

2)如果没有,我如何html绑定输入标签,以便将其插入视图中?

3 个答案:

答案 0 :(得分:30)

你得到$ sce:不安全的错误......

这意味着您应该使用ng-bind-html-unsafe但更新版本的angularjs不再包含此指令,因此您应该像这样使用$ sce.trustAsHtml() ......

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

但是这样你就不能将范围变量绑定到你的html了,所以最好的办法就是写一个可以用ng-bind-html-unsafe代替的指令......

此处为$ sce和指令示例工作PLUNKER ...

答案 1 :(得分:2)

我会将您插入的内容保留在自己的模板中并使用ng-include(http://docs.angularjs.org/api/ng/directive/ngInclude)。

使用带有内容的角度模板(template.html):

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

您可以将其包含在

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

结果就像

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

答案 2 :(得分:1)

Angular使用 ng-bind-html

选择性地清理某些HTML标记

所以,如果你想要所有的标签你应该使用 ng-bind-html-unsafe 而不是

但请注意XSS攻击!

顺便说一句

跟随@Ed Hinchliffe建议

要好得多