Question

Helo我使用this loadingbar。发送请求时我需要覆盖页面。但加载结束后仍然可以看到叠加的div。这是我的代码：

    angular.module('app', ["angular-loading-bar"])
    .config(['cfpLoadingBarProvider', function (cfpLoadingBarProvider) {
        cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
    }])
#loading-bar-container {
    pointer-events: all;
    z-index: 99999;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    cursor: wait;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
}

加载结束后我需要隐藏#loading-bar-container。你有任何想法怎么做？谢谢

Answer 1

最初我误解了这个问题。所以这是关于隐藏/显示用于加载栏的容器。不是隐藏/显示角度加载条本身。所以可以通过下一步方式完成：

someModule.directive('loadingBarContainer', function ($rootScope) { 
    return { 
        restrict: 'A', 
        link: bindVisibilityToEvents 
    }; 

    function linkVisibilityToEvents($scope, $element) { 
        $rootScope.$on('cfpLoadingBar:loading', function () { 
            $element.show(); 
        });  
        $rootScope.$on('completed', function () { 
            $element.hide(); 
        }); 
    } 
})

在模板的某处：

<div id="loading-bar-container" loading-bar-container />

此外，我认为创建名为'background'的不同指令并隐藏/显示使用

设置的元素更方便

backdrop {
    pointer-events: none;
    cursor: wait; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

因此，阻止UI并可视化HTTP活动的可能性会降低。

Angularjs - 加载栏隐藏页面叠加

1 个答案: