AngularJS 中的 Markdown 到 HTML答案

【问题标题】：Markdown to HTML in AngularJSAngularJS 中的 Markdown 到 HTML
【发布时间】：2015-07-03 05:11:25
【问题描述】：

我正在使用 Contentful API 来提取一些内容。它以 json 对象的形式到达我的 Node 服务器，然后将其传递给我的 Angular 前端。 json 对象中的内容包含未处理的 markdown 文本。

例如，Angular 调用可能如下所示：

var id = "asdf76f7g68sd7g";
$http.get("/api/article/" + id).then(function(res){
  $scope.article = res.data;
});

$scope.article 的对象看起来类似于：

$scope.article = {
  title: "Some title",
  content: "Lorem ipsum [dolor](http://google.com) sit amet, consectetur adipiscing elit. Integer iaculis turpis ut enim eleifend venenatis. Proin nec ante quis nulla porta finibus. Suspendisse at [mauris](http://google.com) nisi."
};

在我的 HTML 中，我会像这样显示内容：

<p>{{article.title}}</p>
<p>{{article.content}}</p>

这里的问题是 markdown 没有转换为 HTML 并且呈现为您在对象中看到的那样。如何将任何 Markdown 转换为 HTML 并呈现结果？

【问题讨论】：

标签： javascript html json angularjs markdown

【解决方案1】：

最简单的方法是找到一个可以渲染 Markdown 的 Angular 指令。

一个简单的谷歌搜索显示https://github.com/btford/angular-markdown-directive。这应该可以解决您的问题。

【讨论】：

看起来 Showdown 也维护了 Angular 集成：github.com/showdownjs/ng-showdown

【解决方案2】：

您可以使用像 markdown-js 这样的库。然后在获取时处理它（注意你必须注入 $sce 因为默认情况下，由于安全问题，Angular 不允许打印出 HTML）：

var id = "asdf76f7g68sd7g";
$http.get("/api/article/" + id).then(function(res){
  var article = res.data;
  article.content = $sce.trustAsHtml(markdown.toHTML(article.content));
  $scope.article = article;
});

在你看来：

<div ng-bind-html="article.content"></div>

【讨论】：