发表于: 2017-07-03 20:51:02

1 959


1、修改禁用按钮样式bug。上传图片后,上传按钮是禁用模式,使用js判断增加样式。

.ng-disabled {
 
cursor: not-allowed;
 
opacity: 0.6;
 //
pointer-events:none;
}

pointer-events:none;为标签不可点击,并移除上面的所有操作。导致原有的鼠标禁用手势也会失效。不使用pointer-events:none样式,则按钮只有样式禁用,实际是可以点击进行相关操作。因此只能配合属性操作进行完善。同angularng-classng-disabled一样。

分别在上传和删除按钮增加/移除属性。

document.getElementById('load2').setAttribute('disabled','disabled')

 

document.getElementById('load2').removeAttribute('disabled')

2、之前由于一直想保留原生的上传图片写法,所以尝试不使用angular进行绑定操作,最后发现,始终还是不太完善,在相对简单直接的代码下,操作效果可以实现最终的功能,但是在单图片验证那块,无法实现禁用鼠标手势(原因就是cursorpointer-events:none的冲突),增减disabled标签属性又会对其他input的综合验证有冲突。最后还是只能放到angular控制器里面去实现。就像之前邵博师兄指导的那样,增加$scope.$apply(),进行脏检测对disabled进行赋值解决。当然严格来说,应该在加载结束时进行赋值操作更好一些。

reader.onload = function(e){         //加载时函数
   
$scope.disabled = false;  
   
$scope.$apply();

。。。。}

3

收获:原生js关于表单验证方面的一些基础知识及拓展。

困难:本来想根据控制器拆分代码,发现根据servicedirective拆分好像更好,不是很清楚逻辑上的必要性。

计划:任务9/10功能和体验都没有什么明显bug,但是代码没涉及到封装和自定义,后面准备多学习相关资料。



返回列表 返回列表
评论

    分享到