当我们进行web开发的时候 很多都需要在后台进行大批量处理 但又怕客户在前端进行多次操作或者是其他的操作
那么久会在后端出现错误数据 这个时候我们就需要用到遮盖
我这前端用的是angularJS 那么为了遮盖的功用 我这里就用了自定义标签
废话不多说 我直接上代码
首先是自定义标签
<loading></loading>
这个代码放在你要遮盖的 div 里面
之后是angularJS 里面的实现
/**
* 遮罩
*/
.directive('loading', function(){
return {
restrict: 'E',
transclude: true,
template: '<div ng-show="loading" class="loading" id="allDiv" style="position:fixed; top:0px; left:0px; width:100%; height:100%; display:none; background-color:#000; opacity: 0.5; z-index:99999;">'
+'<img alt="" src="../staticdata/yjtxZG.gif" style="vertical-align: middle;width:100px; height:100px; position: absolute; top:50%; left:50%; margin-top: -50px; margin-left:-50px;"/>'
+'</div>',
link: function (scope, element, attr) {
scope.$watch('loading', function (val) {
if (val){
document.getElementById("allDiv").style.display = "block";
}else{
document.getElementById("allDiv").style.display = 'none';
}
});
}
}
})
/**
* 遮盖
*/
$scope.setLoading =function(){
if($scope.loading ==undefined || $scope.loading ==false){
$scope.loading=true;
}else{
$scope.loading=false;
}
}
当你方法执行的时候调用下 $scope.setLoading() 结束也调用下就可以了 这样一个简单的遮盖就完成了
感谢前辈们的分享 谢谢