Angularjs将字段显示为html [重复]答案

【问题标题】：Angularjs display field as html [duplicate]Angularjs将字段显示为html [重复]
【发布时间】：2014-08-18 17:42:25
【问题描述】：

我有一个包含 HTML 的字段。当我使用 {{field}} 显示时，不会呈现 html。如何将字段显示为呈现的 html？ customForm.Description 包含html：

<h4>Work Requests</h4>
<div ng-repeat="customForms in customFormGroups" class="row">
<div ng-repeat="customForm in customForms" class="col-sm-4">
    <strong>{{customForm.Name}}</strong>
    <p>{{customForm.Description}}</p>
    <div class="form-group">
        <a class="btn btn-primary" href="javascript:void(0);" ng-click="selectService(customForm)">Select</a>
    </div>
</div>
</div>

【问题讨论】：

见：stackoverflow.com/questions/18340872/…

标签： angularjs

【解决方案1】：

根据请求编辑：

这是一个潜在的危险操作。如果您确定您信任该文本并且没有人会破解它，您可以将 $sce 服务注入您的控制器。

我冒昧地（根据其他人的建议）从 Angular 文档中复制了这个示例：

function Ctrl($scope, $sce) {
    $scope.snippet =
      '<p style="color:blue">an html\n' +
      '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
      'snippet</p>';
    $scope.deliberatelyTrustDangerousSnippet = function() {
      return $sce.trustAsHtml($scope.snippet);
    };
  }

然后在你的html中：

<div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>

我强烈建议您阅读此处的完整文档并了解他们试图警告您的内容：

https://docs.angularjs.org/api/ngSanitize/service/$sanitize

【讨论】：

你应该解释它是如何工作的，而不是简单地链接到一个资源。
等等，认真的吗？该页面准确地解释了它是如何工作的。它也是 Angular 文档的一部分，有各种演示，关于使用它做事的安全性的多个警告，以及使事情更安全或不安全的可选指令列表。老实说，我很震惊人们对此投了反对票，这比我输入一个 sn-p 并把它留在那里只是随便使用而不理解的更好的答案。
@JSager 没有人会不同意您的评论，它确实解释了它，但是作为一个适用于今天和明年该链接可能消失的高质量答案意味着您需要添加更多信息直接到您的答案。
@lucuma 我想是的。老实说，我觉得向某人解释这是 angular 的一个记录特征比试图总结要好。但应您的要求，我已更新我的答案，以包括他们页面中的示例以及我能提供的最佳警告。
@JSager 我认为现在每个人都从您的答案中删除了他们的-1。事实上，我认为我们也应该对可以从帮助文档中直接回答的问题投反对票，但有时帮助文档的编写方式不够清晰，以至于每个人都能理解。早期的角度帮助文档不是很清楚。

【解决方案2】：

使用$sce 服务来显示html。在控制器中创建一个返回可信 html 的函数：

$scope.displaySafeHtml = function(html){
  return $sce.trustAsHtml(html);
}

然后将ng-bind-html 与该功能一起使用：

<p ng-bind-html="displaySafeHtml(customForm.Description)"></p>

Demo

另见：https://docs.angularjs.org/api/ng/service/$sce

【讨论】：