AngularJs 遮盖

当我们进行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';

                    }
                });
            }
        }
    })

然后在你的 jsCtrl里面

    /**
     * 遮盖
     */

    $scope.setLoading =function(){
        if($scope.loading ==undefined || $scope.loading ==false){
            $scope.loading=true;
        }else{
            $scope.loading=false;
        }
    }

当你方法执行的时候调用下 $scope.setLoading()  结束也调用下就可以了  这样一个简单的遮盖就完成了

感谢前辈们的分享 谢谢