14

我正在尝试将 HTML 存储在范围变量中，然后在模板视图中使用它。当我在阅读如何以角度进行此操作时，我遇到了ng-bind-html. 在那我注意到，当我用 , 等绑定 html 标签时<a>，<strong>它可以工作。但我无法为其添加<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 绑定输入标签，以便我可以将其插入到视图中？

4

3 回答 3

30

你得到 $sce:unsafe 错误...

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

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

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

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

于 2014-04-02T10:52:16.727 回答
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>
于 2014-04-02T10:13:24.793 回答
1

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

所以如果你想要所有标签，你应该使用ng -bind-html-unsafe

但要小心 XSS 攻击！

顺便提一句

遵循@Ed Hinchliffe 的建议要好得多

于 2014-04-02T10:17:15.917 回答