使用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链接(基于John Linquist的例子).这不适用于该src属性,但它能够加载模型中指定的降价文本字符串.

你能告诉我如何更改这段代码来加载src标签中指定的文件.我正在考虑使用$httpAngularJS提供的但是无法理解我在指令定义中实际使用它.

我想要实现的是 <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属性中给出的文件内容并呈现它.

Answer 2

另一种选择,基于上面的答案.这个使用角度eval,watch和sanitize,这意味着它对于实时编辑非常有用,可以清理html,这是必需的,因为markdown会保留内联html,例如脚本标记,并使用角度表达式来访问数据.

使用

控制器:

 $scope.data = {markdown:"#H1"} 

视图:

<div markdown="data.markdown">
</div>

<textarea ng-model="data.markdown"></textarea>

码:

angular.module('markdown',['ngSanitize']).directive('markdown', function ($sanitize) {
    var converter = new Showdown.converter();
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            function renderMarkdown() {
                var htmlText = converter.makeHtml(scope.$eval(attrs.markdown)  || '');
                element.html($sanitize(htmlText));
            }
            scope.$watch(attrs.markdown, function(){
                renderMarkdown();
            });
            renderMarkdown();
        }
    }
});