我正在使用Contentful API来提取一些内容。它作为json对象到达我的Node服务器,并将其传递给我的Angular前端。json 对象中的内容包含未处理的降价文本。
例如,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 并呈现您在对象中看到的那样。如何将任何降价转换为 HTML 并呈现结果?
最简单的方法是找到一个可以渲染 Markdown 的 Angular 指令。
一个简单的谷歌搜索显示 https://github.com/btford/angular-markdown-directive。这应该可以解决您的问题。
你可以使用像 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>