使用 ng-bind-html 表示来自 JSON 数组的 html答案

【问题标题】：Represent html from JSON array using ng-bind-html使用 ng-bind-html 表示来自 JSON 数组的 html
【发布时间】：2014-07-10 10:30:13
【问题描述】：

我想从 JSON 对象的属性中呈现 HTML 标记并以模式表示它们。

我有这个 JSON 对象：

{
"fileUploadCategories": [
{
  "id": "Bread",
  "title": "GrandmaBread",
  "info": "Some info text.",
  "restService": "empty",
  "detailedInfo": [ "<h1>Stedsnavn</h1>",
  "",//line break
  "<i>Some text on a new line.</i>",
  "",//line break
  "Some text on the next line again <b>Should be bold.</b>"]
},
 {
    "id": "Cake",
    "title": "My Cake",
    "info": "Info text blah.",
    "restService": "empty",
    "detailedInfo": "<b>Test</b> <br> This is a text on a new line <br> New line"
  }
 ]  
}

在我的 html 中，我使用 angularjs 和 ng-repeat 和 ng-bind-html 将数据绑定到引导模式。这是我的代码：

<div class="panel-group" id="accordion" ng-repeat="fileUpload in fileUploadConfig" >
<div class="panel panel-default" >
    <div class="panel-heading">
        <h3 class="panel-title">{{fileUpload.title}}</h3>
    </div>
    <div class="panel-body">
        <p class="bg-info">{{fileUpload.info}}</p>
        <div class="form-horizontal">
            <button class="btn btn-primary" id="{{fileUpload.id}}HelpBox" style="float:right" data-toggle="modal" data-target="#{{fileUpload.id}}HelpModal">
              Hjelp
            </button>
        </div>
     </div>
</div>
<!-- Modal -->
<div id="{{fileUpload.id}}HelpModal"class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">{{fileUpload.id}}Help</h4>
      </div>
      <div class="modal-body" ng-bind-html="fileUpload.detailedInfo">
        {{fileUpload.detailedInfo.join('\n')}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Lukk</button>
      </div>
    </div>
  </div>
</div>
</div>

当我将我的 html 文本放在一个数组中时，它不会按预期呈现。（第一个 JSON 对象）。它在第二个 JSON 对象中工作正常（只需删除 .join('\n') ）。我在一个数组中表示 HTML 的原因是为了以后更容易更改文本并查看它的呈现方式，而不是将所有内容放在一个带有 html 标签的单行上，这看起来真的很乱。

有没有比使用数组来表示 JSON 对象中的数据并让它呈现 html 标签更好的方法？

【问题讨论】：

标签： html json angularjs

【解决方案1】：

我为您创建了一个sample，以便可视化正在发生的事情。如您所见，将 angularjs 标记应用于数组数据类型会导致呈现“字符串化”数组：

<div>{{fields.test}}</div> => ["a","b","c"]

现在，我非常怀疑使用数组是否是个好主意。从语义上讲，这是不正确的，而且相当混乱。只需在 JSON 中对您的 html 进行编码，然后再对其进行解码（称为 angular 中的 sanitize，see more here）：

function MyControllerHtml($scope, $sce) {
    $scope.renderHtml = function(value) {
        return $sce.trustAsHtml(value);
    };
    $scope.html = '<h1>Stedsnavn</h1><br/><i>Some text on a new line.</i><br/>Some text on the next line again <b>Should be bold.</b>';
};

<div ng-controller="MyControllerHtml">
    <div ng-bind-html="renderHtml(html)"></div>
</div>

最后，如果你还想保留数组，那么使用 angular 指令将你的数组绑定到 hml 中

【讨论】：