AngularJS ng模型绑定不'；t对动态添加的内容运行自定义指令

我想创建一个并排标记和预览，在这里，动态输入的内容在您键入时呈现

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

将textarea绑定到markdown元素的数据将在键入时显示文本，但该指令不起作用。原始标记渲染为原始标记

我使用shodown.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);
        }
    }
});

#头衔
var myApp=angular.module（'myApp'，[]）
myApp.directive（'markdown'，function（）{
var converter=new shodown.converter（）；
返回{
限制：'E'，
链接：函数（范围、元素、属性）{
var htmlText=converter.makeHtml（element.text（））；
html（htmlText）；
}
}
});

我知道我可以使用wmd或pagedowm（在这个网站上使用），但我想要一个最小的界面（没有wysiwyg按钮等）和代码大小，因为网站的其他部分将使用AngularJS，所以我想使用它。

试试这个：

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

---

作为一点解释：您需要使用类似于

$watch

，因为在当前代码中，在运行link函数时，您的绑定将是未定义的。此外，link函数只运行一次-当变量更改时，您需要“监视”或“观察”来运行回调。