javascript ng-bind-html 不适用于 Input 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22808062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-bind-html doesnt work for Input tags
提问by Neel
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.
我正在尝试将 HTML 存储在范围变量中，然后在模板视图中使用它。当我阅读如何以 angular 执行此操作时，我遇到了ng-bind-html. 我注意到，当我用、 等绑定 html 标签时<a>，<strong>它可以工作。但我无法为其添加<input>标签。
Meaning, this works:
意思是，这有效：
$scope.myHtml = '<strong>This is <a hreaf="#">Something</a></strong>';
Template:
模板：
<p ng-bind-html="myHtml"> </p>
But this doesnt work:
但这不起作用：
$scope.myHtml = '<input type="text" />';
Template:
模板：
<p ng-bind-html="myHtml"> </p>
The above is just a simplified sample for demonstration purpose only. My question is:
以上只是用于演示目的的简化示例。我的问题是：
1) Does tags not work with ng-bind-html directive?
1) 标签不适用于 ng-bind-html 指令吗？
2) If not, how can I html bind a input tag so I can insert it inside the view?
2）如果没有，我如何html绑定输入标签以便我可以将它插入视图中？
回答by Poyraz Yilmaz
you are getting $sce:unsafe error...
您收到 $sce:unsafe 错误...
this means you should use ng-bind-html-unsafebut newer version of angularjs does not include this directive anymore so you shoud use $sce.trustAsHtml()like this...
这意味着您应该使用ng-bind-html-unsafe但较新版本的 angularjs 不再包含此指令，因此您应该sce.trustAsHtml()像这样使用 $ ...
$scope.trustedInputHtml = $sce.trustAsHtml('<input type="text" />');
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...
但是这样你就不能将范围变量绑定到你的 html 所以最好的方法是编写一个可以替换为ng-bind-html-unsafe...
here is working PLUNKERfor both $sce and directive examples...
这是$sce 和指令示例的工作PLUNKER...
回答by ranzwertig
I would keep the stuff you insert in its own template and use ng-include (http://docs.angularjs.org/api/ng/directive/ngInclude).
我会将您插入的内容保留在自己的模板中并使用 ng-include ( http://docs.angularjs.org/api/ng/directive/ngInclude)。
Having a angular template (template.html) with the contents:
有一个带有内容的角度模板（template.html）：
<strong>This is <a href="#">Something</a></strong>
You can include it with
你可以把它包括在内
<p ng-include="template.html"></p>
This results in sth like
这导致……
<p ng-include="template.html"><span class="ng-scope"><strong>This is <a href="#">Something</a></strong></span></p>
回答by Whisher
Angular selectively sanitizes certain HTML tags with ng-bind-html
Angular 使用ng-bind-html有选择地清理某些 HTML 标签
so if you want all the tags you should use ng-bind-html-unsafeinstead
所以如果你想所有的标签，你应该用纳克绑定- HTML不安全的，而不是
but watch out of XSS attacks !
但要小心 XSS 攻击！
BTW
顺便提一句
It's far better to follow the @Ed Hinchliffe piece of advice
遵循@Ed Hinchliffe 的建议要好得多
