How To Bind An Td Contenteditable Value To Ng-model

Hi i have the following td element: Is there anyway I can pass this ng-model value from the contenteditable td to my c

Solution 1:

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

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

      functionread() {
        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.com/en-us/library/ie/ms533690(v=vs.85).aspx).

Solution 2:

1. With angular-contenteditable

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

That can get value from contenteditable elements

<divng-controller="Ctrl"><spancontenteditable="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.net/Tentonaxe/V4axn/

angular.module('customControl', []).
  directive('contenteditable', function() {
    return {
      restrict: 'A', // only activate on element attributerequire: '?ngModel', // get a hold of NgModelControllerlink: 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 modelfunctionread() {
          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 outif( attrs.stripBr && html == '<br>' ) {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
  });

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