1

我正在使用 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 变成了编辑器，但是当我输入编辑器时，我的模型没有更新。我错过了什么？我应该在上面的代码中实现哪些更改？

任何帮助是极大的赞赏。

4

3 回答 3

1

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

在主页上您有示例如何在文本更改后执行“更新”。

在codepen上codepen :)

于 2014-05-14T11:52:15.417 回答
1

您必须手动设置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();
        });
    });
}

...

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

于 2014-05-14T11:44:42.570 回答
0

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

这是链接。

于 2014-05-14T13:04:47.530 回答