javascript - 带有 AngularJS 指令的 Markdown

Question

我正在尝试使用 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" />

Answer 1

我终于想出了解决办法。

// 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 中给出的文件的内容属性并呈现它。