javascript - 如何将 td contenteditable 值绑定(bind)到 ng-model

Question

您好，我有以下 td 元素:

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

我是否可以将这个 ng-model 值从 contenteditable td 传递到我的 Controller ？提前谢谢大家

Answer 1

contenteditable 的绑定(bind)不是内置的，但您可以编写一个简单的指令来完成任务。

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

但是请注意，在 Internet Explorer 中，contenteditable 不能应用于 TABLE、COL、COLGROUP、TBODY、TD、TFOOT、TH、THEAD 或 TR 元素直接；内容可编辑的 SPAN 或 DIV 元素需要放置在各个表格单元格内(参见 http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx )。