Question

我正在使用AngularJS + Bootstrap实现一个显示注释列表的控件它是这样的：

  <div class="comments">
    <div ng-repeat="(id, comment) in person.comments" class="row">
      <div class="form-group">
        <div class="col-xs-12">
          <div class="input-group">
            <span class="input-group-addon vertical-align-top">
              <div><i>Date:</i> {{ comment.date }}</div>
              <div><i>By:</i> {{ comment.author }}</div>
            </span>
            <div class="form-control form-control-content">
              {{ comment.content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

一切都是o.k ..
问题是：comment.content是HTML数据（例如，它包含换行符，超链接，样式格式，......）。默认情况下，HTML呈现为纯文本。

问题是：如何在div中将数据显示为HTML？

Answer 1

您可以使用ng-bind-html。

<div class="form-control form-control-content" ng-bind-html="comment.content"></div>

Answer 2

如果您希望将{{comment.content}}解释为HTML，则需要查看ngBindHtml指令。

所以你需要修改它：

<div ng-bind-html="comment.content" class="form-control form-control-content"></div>

您必须将$sanitize添加到项目依赖项中，如上面ngBindHtml doc链接中所述。

AngularJS：如何在视图中显示html数据？

2 个答案: