发表于: 2017-07-03 20:51:02
1 956
1、修改禁用按钮样式bug。上传图片后,上传按钮是禁用模式,使用js判断增加样式。
.ng-disabled {
cursor: not-allowed;
opacity: 0.6;
// pointer-events:none;
}
pointer-events:none;为标签不可点击,并移除上面的所有操作。导致原有的鼠标禁用手势也会失效。不使用pointer-events:none样式,则按钮只有样式禁用,实际是可以点击进行相关操作。因此只能配合属性操作进行完善。同angular的ng-class和ng-disabled一样。
分别在上传和删除按钮增加/移除属性。
document.getElementById('load2').setAttribute('disabled','disabled')
document.getElementById('load2').removeAttribute('disabled')
2、之前由于一直想保留原生的上传图片写法,所以尝试不使用angular进行绑定操作,最后发现,始终还是不太完善,在相对简单直接的代码下,操作效果可以实现最终的功能,但是在单图片验证那块,无法实现禁用鼠标手势(原因就是cursor与pointer-events:none的冲突),增减disabled标签属性又会对其他input的综合验证有冲突。最后还是只能放到angular控制器里面去实现。就像之前邵博师兄指导的那样,增加$scope.$apply(),进行脏检测对disabled进行赋值解决。当然严格来说,应该在加载结束时进行赋值操作更好一些。
reader.onload = function(e){ //加载时函数
$scope.disabled = false;
$scope.$apply();
。。。。}
3、
收获:原生js关于表单验证方面的一些基础知识及拓展。
困难:本来想根据控制器拆分代码,发现根据service、directive拆分好像更好,不是很清楚逻辑上的必要性。
计划:任务9/10功能和体验都没有什么明显bug,但是代码没涉及到封装和自定义,后面准备多学习相关资料。
评论