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原始文件?