结合 ng-repeat 和 ng-bind-html？答案

【问题标题】：Combining ng-repeat and ng-bind-html?结合 ng-repeat 和 ng-bind-html？
【发布时间】：2015-02-09 01:47:32
【问题描述】：

我有一个消息列表，其中的文本包含一些我想要显示的 html。所以正如建议的here 和here 我目前正在尝试的是这样的：

<div ng-repeat="message in messages">
    {{ message.sender_name }} - <div ng-bind-html="message.text"></div>
</div>

它显示message.sender_name，但不显示message.text。当我简单地执行{{ message.text }} 时，它会正确显示文本（但显示原始<br>s 而不渲染它们）。

有人知道为什么这不起作用吗？

【问题讨论】：

您的模块中是否包含ngSanitize？您需要 ngSanitize 才能使 ng-bind-html 工作。
包含/下载 ajax.googleapis.com/ajax/libs/angularjs/1.X.Y/… 并将 ngSanitize 列为模块声明中的依赖项。例如：- angular.module('myapp', ['ngSanitize', ..deps])
@PSL - 太棒了！就是这样！如果您将评论添加为答案，我可以接受！
当然添加了。谢谢！！

标签： javascript angularjs ng-bind-html

【解决方案1】：

ngBindHtml 指令需要$sce service 来解析和显示绑定的 html。因此，您需要在模块声明中包含 ngSanitize 模块，作为 ng-bind-html 工作的依赖项。

您可以从以下位置下载适当的版本：- http://ajax.googleapis.com/ajax/libs/angularjs/1.X.Y/angular-sanitize.js

例如：-

angular.module('myApp', ['ngSanitize', ..otherdeps]);

【讨论】：

【解决方案2】：

ng-bind-html 评估表达式并将生成的 HTML 以安全的方式插入到元素中。默认情况下，生成的 HTML 内容将使用 $sanitize 服务进行清理。要利用此功能，请确保 $sanitize 可用，例如，将 ngSanitize 包含在模块的依赖项中（而不是核心 Angular）。为了在模块的依赖项中使用 ngSanitize，您需要在应用程序中包含“angular-sanitize.js”。顺便说一下，这是 Angular js 文档中的描述。您还可以在此处查看将 angular-sanitize 与 ng-bind-html 一起使用的示例。

祝你好运。

【讨论】：