发表于: 2017-05-17 20:53:20
1 902
任务十
今天完成的事情
- 1解决富文本编辑器数据无法同步的问题。。
- 2.给编辑功能添加表单验证。
- 3.使用ng-messages完善登录页面,实现退出功能.
- 4.解决富文本编辑器内容为空时还是会通过验证的问题。
明天计划的事情
- 1学习并使用angular的模态框插件,看了官网好像有点复杂。
- 2研究下resolve这个对象,并在resolve中加一个判断用户是否登录的函数。
遇到的问题
1 '<p>萨摩耶真美呀</p>'这个字符串不能在富文本编辑器上渲染,去官网上翻文档,发现老王的作者很贴心的贴出了一个封装好的angular指令,虽然看的不是很懂(自定义指令必须要学会了),但是解决了这个渲染问题。
app.directive('contenteditable', function() {
return {
restrict: 'A' ,
require: '?ngModel',
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(ngModel.$viewValue || '');
};
// Listen for change events to enable binding
element.on('blur keyup change', function() {
scope.$apply(readViewText);
});
// No need to initialize, AngularJS will initialize the text based on ng-model attribute
// Write data to the model
function readViewText() {
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);
}
// 创建编辑器
var editor = new wangEditor(element);
editor.create();
}
};
});
2本来我在那里开开心心的研究ui-bootstrap模态框怎么用,结果庭伟跑过来找我,说有一个bug,在富文本编辑器里面输入‘我爱大金毛后’再删除后,通过了表单验证,也就是说此时虽然富文本编辑器里面的内容为空,但是同步的ng-model里面并不是空,打印出来后结果是'<p><br></p>',找到原因后屁颠屁颠的去项目的github上翻issure看看有没有解决方案,然后作者说了内容里面一定要有这个'<p><br></p>',不能通过配置项更改,所以我们只能自己在代码里面验证。于是,经过3个小时的demo,试错,排查,测试后,终于写出了3行代码,解决了这个问题:
$scope.$watch('vm.artParams.content',function (newValue,oldValue) {
var contentText=angular.element('<div>'+newValue+'</div>')[0].innerText.trim();
$scope.isContentNull=(contentText==="");
});
可把我厉害坏了,叉会腰。
收获
1 学会了使用ng-message。
2学会了配置老王编辑器。
评论