我正在尝试将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绑定输入标签,以便将其插入视图中?
答案 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建议
要好得多