Markdown没有使用angular的数据绑定进行渲染

Markdown is not rendering with Angular's data-binding

本文关键字：数据绑定 angular Markdown      更新时间：2023-09-26

我正在使用一个例子，从这个提琴。我想要实现的是在Angular的ng-repeat中动态地填充日期。该示例是一个工作示例，但它不使用数据绑定。下面是我的代码:

JS 

.directive('markdown', function () {
    var converter = new Showdown.converter();
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            console.log(element.text()); //Prints out {{post.article}}
            var htmlText = converter.makeHtml(element.text());
            element.html(htmlText);
        }
    };
})
HTML 

<div ng-repeat="post in posts">
    <div markdown>{{post.article}}</div> <!-- Output: ##Testing -->
    <div markdown>**Testing**</div>      <!-- Output: <strong>Testing<strong>-->
</div>

在该代码的注释中是结果。第一个输出没有如预期的那样进行。我在这里做错了什么，还是我错过了什么?

控制台注释

outerHTML: "<div markdown="" class="ng-binding"><p>{{post.article}}</p></div>"
outerText: "{{post.article}}↵↵"
outerHTML: "<div markdown=""><strong>Testing</strong></div>"
outerText: "Testing↵"

注意:查看JS中的注释，console.log(element.text());

找到一个替代方案:

包含Angular Sanitize Js和Markdown Converter Js

JS 

$scope.converter = new Markdown.Converter();
$scope.convert = function(markdown) {
    return $scope.converter.makeHtml(markdown);
}
HTML 

<div ng-bind-html="convert(post.article)"></div>
相关文章：