javascript - Angular.js ngModelController contenteditable 指令

Question

我的指令代码（为了安全而编辑了一些部分）：

angular.module('myApp')
  .directive('contenteditable', function () {
    return {
      restrict: 'A',
      require: '?ngModel'
      link: function(scope, element, attrs, ngModel) {
        if(!ngModel) return;

        ngModel.$render = function() {
            element.html(ngModel.$viewValue || '');
        };

        element.on('blur keyup change', function() {
            scope.$apply(read);
        });

        read(); //Init

        function read() {
            var html = element.html();
            if( attrs.stripBr && html == '<br>') {
                html = '';
            }
            ngModel.$setViewValue(html);
        }
      }
    };
  });

这应该允许我编辑表单中的字段并且它会更改，但是它只是将表单全部阻塞在一起。

更新：

HTML 片段：

  <form class="form-group" ng-repeat="field in fields">
    <label ng-model="field">{{ field }}</label>
    <input contenteditable type="text" class="form-control" placeholder="{{field}}" ng-model="field">
</form>