1

我想创建一个并排的降价和预览，在您键入时呈现动态输入的内容。

我有一个 markdown 元素的自定义指令，它适用于静态文本，将 DOM（原始 makdown）中的内容转换为漂亮的 HTML（格式化的 markdown）。

将 textarea 数据绑定到 markdown 元素将在您键入时显示文本，但该指令不起作用。原始降价呈现为原始降价。

我使用 showdown.js 作为降价解析器。我觉得我错过了一些简单的东西，但我就是看不到它，这让我很烦。

<div ng-app="myApp" class="container-fluid">
    <div class="span6">
        <textarea ng-model="text"> </textarea>
    </div>
    <div class="span5 border">
      <markdown ng-bind="text">#title
      </markdown>
    </div>
</div>


var myApp = angular.module('myApp', [])

myApp.directive('markdown', function() {
    var converter = new Showdown.converter();
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            var htmlText = converter.makeHtml(element.text());
            element.html(htmlText);
        }
    }
});

看小提琴

我知道我可以使用 wmd 或 pagedowm（在本网站上使用），但我想要一个最小的界面（没有所见即所得的按钮等）和代码大小，并且由于网站的其余部分将使用 AngularJS，我想使用它。

4

1 回答 1

2

尝试这个：

myApp.directive('markdown', function () {
    var converter = new Showdown.converter();

    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, element, attrs, model) {

            var ngModel = attrs['ngModel'],
                render = function () {
                    var html, value;

                    value = ((ngModel) ? model.$modelValue : element.text()) || '';

                    html = converter.makeHtml(value);

                    element.html(html);
                };

            if (ngModel) {
                scope.$watch(ngModel, render);
            }

            render();
        }
    }
});
于 2013-05-05T15:47:50.303 回答