Hi i have the following td element:

<td ng-model="name" contenteditable='true'></td>

Is there anyway I can pass this ng-model value from the contenteditable td to my controller? Thanks in advance guys

Hi i have the following td element:

<td ng-model="name" contenteditable='true'></td>

Is there anyway I can pass this ng-model value from the contenteditable td to my controller? Thanks in advance guys

• javascript
• html
• angularjs
• contenteditable

2 Answers 2

Binding to contenteditable isn't built in, but you can write a simple directive that will acplish the task.

app.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);
      });
    }
  };
});

Take note, however, that in Internet Explorer, contenteditable cannot be applied to the TABLE, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, or TR elements directly; a content editable SPAN or DIV element would need to be placed inside the individual table cells (See http://msdn.microsoft./en-us/library/ie/ms533690(v=vs.85).aspx).

1. With angular-contenteditable

Use angular-contenteditable https://github./akatov/angular-contenteditable.

That can get value from contenteditable elements

<div ng-controller="Ctrl">
  <span contenteditable="true"
        ng-model="model"
        strip-br="true"
        strip-tags="true"
        select-non-editable="true">
  </span>
</div>

2.With Directive

As well as you can use this Directive for it.

This Directive was initially obtained : http://jsfiddle/Tentonaxe/V4axn/

angular.module('customControl', []).
  directive('contenteditable', function() {
    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(ngModel.$viewValue || '');
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$apply(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);
        }
      }
    };
  });

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="customControl">
  <form name="myForm">
   <div contenteditable
        name="myWidget" ng-model="userContent"
        strip-br="true"
        required>Change me!</div>
    <span ng-show="myForm.myWidget.$error.required">Required!</span>
   <hr>
   <textarea ng-model="userContent"></textarea>
  </form>
</div>