Question

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

我有一个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);
        }
    }
});

see the fiddle

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

Answer 1

试试这个：

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();
        }
    }
});

AngularJS ng-model绑定不会对动态添加的内容运行自定义指令

1 个答案: