ng-bind-html 不适用于 Input 标签 [英] ng-bind-html doesnt work for Input tags

问题描述

我正在尝试将 HTML 存储在范围变量中，然后在模板视图中使用它.当我阅读如何在 angular 中执行此操作时，我遇到了 ng-bind-html.我注意到，当我用 、 等绑定 html 标签时，它可以工作.但我无法向其中添加 标签.

I am trying to store a HTML inside a scope variable and then use it in template view. When I was reading how to do this in angular, I came across ng-bind-html. In that I've noticed that when I bind html tags with <a>, <strong>, etc.. it works. But I am unable to add <input> tags to it.

意思是，这有效:

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

以上只是用于演示目的的简化示例.我的问题是:

The above is just a simplified sample for demonstration purpose only. My question is:

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

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

推荐答案

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

you are getting $sce:unsafe error...

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

this means you should use ng-bind-html-unsafe but newer version of angularjs does not include this directive anymore so you shoud use $sce.trustAsHtml() like this...

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

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

but this way you cannot bind scope variables to your html so best way is writing a directive which can be replace with ng-bind-html-unsafe...

这里正在 PLUNKER 用于 $sce 和指令示例...

here is working PLUNKER for both $sce and directive examples...

这篇关于ng-bind-html 不适用于 Input 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！