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

【问题标题】：AngularJS ng-model binding doesn't run a custom directive on dynamically added contentAngularJS ng-model 绑定不会对动态添加的内容运行自定义指令
【发布时间】：2013-05-05 15:41:29
【问题描述】：

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

我有一个 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，我想使用它。

【问题讨论】：

稍微解释一下：您需要使用$watch 之类的东西，因为在您当前的代码中，在运行链接函数时，您的绑定将是未定义的。此外，链接函数只运行一次——当变量发生变化时，您需要“观察”或“观察”来运行回调。

标签： angularjs markdown angularjs-directive showdown

【解决方案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();
        }
    }
});

【讨论】：