如何将模型中的HTML以HTML形式显示，而不是纯文本

Question

我正在学习 Angular 并创建一个 todo 应用程序。创建 todo 使用所见即所得编辑器 (textAngular)，它看起来像这样：

这个功能正常运行并将 HTML 保存到名为todo.description的 ng-model 中。但是在显示此 todo 时，从描述中获取的 HTML 被显示为纯文本。像这样：

简单地将描述绑定到模型。

<p class="text-muted">{{todo.description}}</p>

我认为这可以非常简单地完成，但我没有找到解决方案。我尝试了xmp标签，但那不是我要找的。

如何使描述显示HTML而不是文本？

- RobSeg

---

可能这个字符串已经被转义了。所以你需要放置原始文本。 - Robert

可能是重复的问题 https://dev59.com/WmQm5IYBdhLWcg3w2R9J - Bhavin

问题基本上是重复的。但是@Vishnu给出的答案不同且更好。我认为这个问题没有增加价值，但答案有。 - RobSeg

@Tonny 看起来是两个不同的问题。在提到的链接中，所有的 HTML 标签都将被忽略，模型将以纯文本形式呈现，没有样式。 - Sam Su

Answer 1

<p class="text-muted" ng-bind-html="todo.description"></p>

https://docs.angularjs.org/api/ng/directive/ngBindHtml

- Vishnu

Answer 2

你可以使用ngBindHtml来显示你的HTML代码。

var app = angular.module('myApp', ['ngSanitize']);

app.controller('myCtrl', ['$scope',
  function($scope) {
    $scope.html = '<b>Test</b><u>Test</u>&lt;HTML';
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <span ng-bind-html="html"></span>
</div>

- Christoph

Answer 3

你需要使用$sce（严格上下文转义）的$trustAsHTML过滤器。

- Subash Selvaraj