关于javascript：ng-bind-html不适用于Input标签


ng-bind-html doesnt work for Input tags

我试图将HTML存储在范围变量内，然后在模板视图中使用它。 当我阅读如何以角度进行此操作时，遇到了ng-bind-html。 在那我注意到，当我用，等绑定html标签时，它可以工作。 但是我无法在其中添加标签。

意思是，这有效：

1
$scope.myHtml = 'This is Something';

模板：

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

但这不起作用：

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

模板：

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

上面只是一个简化的示例，仅用于演示目的。 我的问题是：

1)标签不能与ng-bind-html指令一起使用吗？

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

相关讨论

您收到$ sce：unsafe错误...

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

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

但是这种方式不能将范围变量绑定到html，因此最好的方法是编写一个可以用ng-bind-html-unsafe替换的指令。

这里正在为$ sce和指令示例工作PLUNKER ...

相关讨论

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

具有包含内容的角度模板(template.html)：

1
This is Something

您可以将其包含在

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

结果导致……

1
2
<p ng-include="template.html"><span class="ng-scope">This is Something</span>
</p>

Angular使用ng-bind-html选择性地清除某些HTML标签

因此，如果您想要所有标签，则应改用ng-bind-html-unsafe

但是要当心XSS攻击！

BTW

最好遵循@Ed Hinchliffe的建议

相关讨论