contenteditable标签不能直接与angular的ng模型一起使用，因为contenteditable的方式会在每次更改时重新渲染dom元素。

为此，您必须使用自定义指令包装它：

JS：

angular.module('customControl', ['ngSanitize']).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

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

从原始文档中获取