我正在尝试使用 AngularJS 为 HTML 制定指令,以便我可以在浏览器中呈现 Markdown。我想要的是有一个 <markdown>
带有 src
的标签将加载指定文件并正确呈现它的属性。
我已经部分实现如下 -
function Main($scope) {
$scope.theContent = '#asgakfgajgfas\n##akfaljfqpo\ndhvkajvlbndvm';
};
angular.module('myApp', [])
.directive("markdown", function ($compile) {
return {
restrict: 'E',
require: 'model',
scope: {
value: "=model"
},
template: '<div ng-bind-html-unsafe="value | markdown"></div>'
};
}).filter('markdown', function () {
var converter = new Showdown.converter();
return function (value) {
return converter.makeHtml(value || '');
};
});
以及对应的HTML——
<div ng-controller="Main">
<markdown model="theContent"></markdown>
</div>
这是 jsFiddle link (基于 John Linquist 的例子)上面的代码。这不适用于 src
属性,但是它能够加载模型中指定的 Markdown 文本字符串。
你能告诉我如何更改此代码以加载 src
中指定的文件吗?标签。我正在考虑使用 $http
由 AngularJS 提供,但我无法理解在指令定义中实际使用它。
我想实现的是<markdown src="a/b/c.md" />
最佳答案
我终于想出了解决办法。
// Render markdown in the HTML page
app.directive("markdown", function ($compile, $http) {
var converter = new Showdown.converter();
return {
restrict: 'E',
replace: true,
link: function (scope, element, attrs) {
if ("src" in attrs) {
$http.get(attrs.src).then(function(data) {
element.html(converter.makeHtml(data.data));
});
} else {
element.html(converter.makeHtml(element.text()));
}
}
};
});
我定义了一个自定义 link
接受 <markdown>
内容的函数标记并正确呈现它们,或者它获取 src
中给出的文件的内容属性并呈现它。
关于javascript - 带有 AngularJS 指令的 Markdown,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14982422/