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.

Answer 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 :)

Answer 2

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.

Answer 3

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

Here is the link.