将HTML5 contenteditable div设置为pristine

时间:2015-11-23 15:28:19

标签: angularjs html5 contenteditable

JSP片段:

<div class="row">
    <div class="col-xs-3"><label style="font-size: larger;">Description:</label></div>
    <div class="col-xs-8">
        <div class="form-control" name="createWorkSpc" ng-model="newWorkspace.description" required contenteditable="true" style="max-height: 100px; color: grey; overflow: auto; height: 100px; border: 1px solid rgb(204, 204, 204); border-radius: 4px;"></div>
    </div> 
    <div class="col-xs-1">
        <span ng-show="workspaceTitleAndDesc.workspace_name.$dirty && workspaceTitleAndDesc.createWorkSpc.$error.required" class="glyphicon glyphicon-exclamation-sign"></span>
    </div>
</div>

JS指令代码段:

directive('contenteditable',function($sce){
         return {
              restrict: 'A',
              require: '?ngModel',
              link: function(scope, element, attrs, ngModel) {

                  if (!ngModel) return;

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

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

                  read();

                 /* ngModel.$validators.contenteditable = function(modelValue, viewValue){
                    if (ngModel.$isEmpty(modelValue)) {
                      return false;
                    }
                    return true;
                  };*/

                  /*ngModel.$formatters.push(function (value) {
                        if (value === '') {
                            ngModel.$setValidity('syntaxError', false);
                        } else {
                            ngModel.$setValidity('syntaxError', true);
                        }

                        return value;
                    });*/

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

已使用 ng-form =“workspaceTitleAndDesc”,model =“newWorkspace”

当contenteditable div有一些错误时,必须显示范围。但是在表格加载方面我也得到了跨度,因为div是脏的而不是原始的。

我为div编写了格式化程序和验证程序,但似乎没有任何效果。我已将此代码作为注释代码发布。

如何在表单加载上制作满意的div原始文件?

0 个答案:

没有答案