How can i get the ng-model correct value in a controller used with contenteditable directive?

Question

i have tried this with ng-change, ng-keypress, ng-keyup, ng-keydown.

With ng-change ng-model value is reflecting in controller but not on the front end.

with other three value takes one charactor less then the original value. eg: if shareText = tag3 then it shows only tag. How can i get the correct value ie tag3

Answer 1

.directive("contenteditable", function() { return { restrict: "A", require: "ngModel", link: function(scope, element, attrs, ngModel) {

            function read() {
                ngModel.$setViewValue(element.html());
            }

            ngModel.$render = function() {
                element.html(ngModel.$viewValue || "");
            };

            element.bind("blur keyup change", function() {
                scope.$apply(read);
            });
        }
    };
})

by using this its working fine. when i was using link: function(scope, elm, attr, ngModel) {

            function updateViewValue() {
                ngModel.$setViewValue(this.innerHTML);
            }

            //Or bind it to any other events
            elm.on('keyup', updateViewValue);

            scope.$on('$destroy', function() {
                elm.off('keyup', updateViewValue);
            });

            ngModel.$render = function() {
                elm.html(ngModel.$viewValue);
            }

        }

inside die=rective link function then ng-change was not reflecting on front end.