当我使用编辑器时，AngularJS 模型值没有更新答案

【问题标题】：AngularJS model value not updated when I use editor当我使用编辑器时，AngularJS 模型值没有更新
【发布时间】：2014-05-14 11:36:50
【问题描述】：

我正在使用 Jhtmlarea，这是我的指令：

test.directive('jhtml', function () {
        return {
            restrict: 'A',            
            replace: false,
            link: function (scope, elem, attr) {
                $(elem).htmlarea({
                    toolbar: [
                   ["bold", "italic", "underline"],
                   ["p", "h1", "h2", "h3", "h4", "h5", "h6"],
                   ["link", "unlink"]]
                });
            }
        }
    });

这是我的代码：

<textarea cols="48" rows="17" ng-model="emailDetails.message" jhtml></textarea>

我可以正确地看到我的 textarea 变成了编辑器，但是当我在编辑器中输入时，我的模型没有更新。我错过了什么？我应该在上面的代码中实现哪些更改？

非常感谢任何帮助。

【问题讨论】：

您必须手动使用 AngularJS 的 $watch 处理更改。
使用 $apply 方法来注意自定义指令的变化。我认为这对你有帮助
@chamu：你能给我举个例子吗？

标签： javascript jquery angularjs jhtmlarea

【解决方案1】：

考虑使用textAngular，它有很好的文档记录。它可以节省您的时间:)。

在主 page 你有示例如何在文本更改后执行“更新”。

在代码笔上codepen :)

【讨论】：

【解决方案2】：

您必须手动设置watcher。

这是我为您的代码定制的自定义指令中的代码。试试这样的：

var model = $parse(attrs.ngModel);
scope.$watch(model, function(value) {
    if(value) {
        $timeout(function() {
            // Update whatever you need
        });
    }
});

将此代码放在您的代码之后的link 函数中。

另外别忘了注入$timeout和$parse服务。

更新

您可以将事件侦听器附加到您的编辑器并更新 model 以了解更改。

类似这样的：

...

link: function (scope, elem, attr) {
    $(elem).htmlarea({
        toolbar: [
        ["bold", "italic", "underline"],
        ["p", "h1", "h2", "h3", "h4", "h5", "h6"],
        ["link", "unlink"]]
    });

    $(elem).on('change', function(e) {
        scope.$apply(function() {
            scope.model = $(elem).val();
        });
    });
}

...

注意：此代码未测试。我刚刚演示了解决方案的原理。我不知道你的编辑实际上是哪种活动。

【讨论】：

感谢朋友，但事实并非如此。当编辑器中的文本发生更改时，我想更新我的模型。希望这是有道理的？
感谢 Karl，但事件没有触发。一旦我可以参加活动，但更改活动没有触发，我很乐意给你 +1 :(
@Jack 我在回答中指出这是对原理的演示（您应该在哪里以及如何处理更改和更新模型）。

【解决方案3】：

您还可以查看 angularJS 的 tinymce 编辑器。

这里是link。

【讨论】：