Get updated content from pre-tag in AngularJS

Question

I have a pre-tag which is binded to FileReader-Result to parse text. The tag is editable and I would like to get the updated content after a click on a button. Unfortunately I always get the origin text content.

HTML

<pre contenteditable="true" id="rangy" class="document-content textareac"
     ng-bind="vm.document.content" ng-hide="document.mode=='edit'"
     contenteditable>
</pre>

JS

var txt = vm.document.content;

I've tried to get it by a query select, but It do not work. It gives me an HTML-object.

t = angular.element(document.querySelector('#rangy'));
alert(t);
// alert(JSON.stringify(t);

I have tried with querySelector and it worked for me. Fiddle https://jsfiddle.net/sd2yuc3f/ for your reference. And regarding binding not working for content-editable field, please refer https://stackoverflow.com/questions/23528478/angularjs-ng-model-fails-on-contenteditable-span Hope it helps. — Rajat, Sep 22 '19 at 10:32

score 1 · Accepted Answer · answered Sep 22 '19 at 16:12

The AngularJS documentation has an example of a contenteditable directive that enables the ng-model directive for the element.

app.directive('contenteditable', ['$sce', function($sce) {
  return {
    restrict: 'A', // only activate on element attribute
    require: '?ngModel', // get a hold of NgModelController
    link: function(scope, element, attrs, ngModel) {
      if (!ngModel) return; // do nothing if no ng-model

      // Specify how UI should be updated
      ngModel.$render = function() {
        element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
      };

      // Listen for change events to enable binding
      element.on('blur keyup change', function() {
        scope.$evalAsync(read);
      });
      read(); // initialize

      // Write data to the model
      function read() {
        var html = element.html();
        // When we clear the content editable the browser leaves a <br> behind
        // If strip-br attribute is provided then we strip this out
        if (attrs.stripBr && html === '<br>') {
          html = '';
        }
        ngModel.$setViewValue(html);
      }
    }
  };
}]);

HTML

 <div contenteditable
      name="myWidget" ng-model="userContent"
      strip-br="true"
      required>Change me!</div>

For more information, see

AngularJS ngModelController API Reference - Custom Control Example

Get updated content from pre-tag in AngularJS

1 Answers1