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>