如何将 td contenteditable 值绑定到 ng-model

Question

您好，我有以下 td 元素：

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

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

Answer 1

1.随着 angular-contenteditable

使用 angular-contenteditable https://github.com/akatov/angular-contenteditable.

可以从contenteditable元素中获取价值

<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。

最初获得该指令：http://jsfiddle.net/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.com/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>

Answer 2

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

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 元素；内容 editable SPAN 或 DIV 元素需要放置在单独的 table 单元格中（参见 http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx）。

如何将 td contenteditable 值绑定到 ng-model

How to bind an td contenteditable value to ng-model

html

javascript

contenteditable

angularjs