I spent some reasonable time finding out, how to properly set-up a contenteditable directive in angularjs. What I wanted was a directive that preserves all new-line characters but I did not want any HTML code in the model. I ended up with below directive which replaces the tags with new-line characters. I used this directive on a contenteditable…

angularjs-contenteditable.js

app.directive('contenteditable', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel) {
      if(!ngModel)
        return;
      // model -> view
      ngModel.$render = function() {
        element.html(ngModel.$viewValue);
      };
      // view -> model
      element.bind('keyup', function() {
        scope.$apply(function() {
          var html = element.html();
          html = html.replace(/<br>/g, "\n");
          html = html.replace(/<p>/g, "\n");
          html = html.replace(/<\/p>/g, "");
          html = html.replace(/<div>/g, "\n");
          html = html.replace(/<\/div>/g, "\n");
          html = html.replace(/&nbsp;/g, "");
          ngModel.$setViewValue(html);
        });
      });
    }
  };
});