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() 結束也調用下就可以了這樣一個簡單的遮蓋就完成了

感謝前輩們的分享謝謝