AngularJS model value not updated when I use editor

Question

I am using Jhtmlarea and this is my directive:

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"]]
                });
            }
        }
    });

and this is my code:

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

I can correctly see my textarea turned into editor but when I type into editor my model is not updated. What am I missing? What changes should I implement in the above code?

Any help is greatly appreciated.

You must *manually* handle the changes using AngularJS's `$watch`. — Karlen Kishmiryan, May 14 '14 at 11:42
use the $apply method to notice the changes in custom directive. I think this helps you — chandu, May 14 '14 at 11:43

Karlen Kishmiryan · Answer 1 · 2014-05-14T11:54:01.237

You must manually set up watcher.

Here is the code from my custom directive which I've customized for your code. Try something like this:

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

Place this code in your link function after your code.

Also don't forget to inject $timeout and $parse services.

UPDATE

You can attach an event listener to your editor and update the model regarding the changes.

Something like this:

...

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

...

NOTE: This code is NOT tested. I've just demonstrated the principle of the solution. I don't know actually which kind of events has your editor.

Thanks friend but it is other way round. I want to update my model when the text in the editor changes. Hope this makes sense? — Jack, May 14 '14 at 11:48
thanks Karl but the event doesn't fire. I would gladly give you +1 once I can hit the event but the change event doesn't fire :( — Jack, May 14 '14 at 11:57
@Jack I've noted in my answer that it's the demonstration of the principle (where and how you should handle that change and update the model). — Karlen Kishmiryan, May 14 '14 at 11:59

score 1 · Accepted Answer · answered May 14 '14 at 11:52

1

Consider to use textAngular, it is very well documented. It can save Your time :).

On main page You have example how to perform "update" after text change.

And on codepen codepen :)

answered May 14 '14 at 11:52

qwetty

1,238
2
10
24

score 0 · Answer 3 · answered May 14 '14 at 13:04

0

You can also have a look on tinymce editor for angularJS.

Here is the link.

answered May 14 '14 at 13:04

Shivaraj

613
3
10

AngularJS model value not updated when I use editor

3 Answers3