在 Angular 应用程序中使用 HTML 样式化 JSON答案

【问题标题】：Style JSON with HTML in Angular App在 Angular 应用程序中使用 HTML 样式化 JSON
【发布时间】：2017-09-26 18:55:09
【问题描述】：

我正在使用 JSON 对象将文本注入到我的 Angular 应用程序中。有一个“bio”部分需要 HTML 样式，例如<br />，这样文本就不是一大块不可读的文本。我试过trustAsHtml，但它对我不起作用。一个可行的例子是最好的，因为我已经阅读了 Angular 文档并且无法为我工作。

非常感谢您的帮助！

带有 Angular JS 的 HTML

<div class="bio">
    {{exhibits[whichItem].bio}}
</div>

JSON

[
  {
    "name":"Name goes here",
    "bio":"First long block of text goes here then it needs a break <br /> and the second long block of text is here."
  }
]

【问题讨论】：

怎么没用？是否有来自角度的控制台错误或没有显示？你能举例说明你是如何使用 trustAsHtml 的吗？

标签： javascript html angularjs json

【解决方案1】：

您必须添加“ngSanitize”模块作为依赖项您还必须包含相应的脚本：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>

然后使用ng-bind-html

<div class="bio" ng-bind-html="exhibits[whichItem].bio">

</div>

如果你不使用ngSanitize模块，它会给你ng-bind-html的错误

您可以参考here

【讨论】：

做到了！起初我无法让它工作，然后我记得我必须在 angular.module 中调用它。你真的帮了我很大的忙，我真的很感激。

【解决方案2】：

这个

<div class="bio"ng-bind-html=exhibits[whichItem].bio>

</div>

可能会成功。

【讨论】：