在 AngularJS 中显示加载栏时禁用控件

我正在使用AngularJS开发一个Web应用程序。我想在从服务器加载数据需要很长时间时显示负载栏。

为了模拟大量的数据负载，我使用$timeout，在操作开始时显示负载条，在操作结束时隐藏它。

面临的问题是，当然我只在操作开始时显示动画图像，因此在加载数据期间仍然可以单击所有控件（按钮、链接等）。我想找到一种方法在加载过程中禁用所有控件，以避免用户单击它们。

你能在这里帮我吗？提前非常感谢！

我的一些代码如果有帮助：

我在 html 中的控件：

<div class="header">
            <ul id="headerLinks" class="nav nav-pills pull-right">
                <li ng-class="menuItems.home.selected && 'active'"><a   ng-click="changeRootPath('home')">Home</a></li>
                <li ng-class="menuItems.products.selected && 'active'"><a   ng-click="changeRootPath('products')">Products</a></li>
                <li ng-class="menuItems.register.selected && 'active'"><a  ng-click="changeRootPath('register')">Sign in</a></li>
                <li ng-class="menuItems.login.selected && 'active'"><a  ng-controller="LoginController"  ng-click="changeRootPath('login');open('md')" >Login</a></li>
                <li ng-class="menuItems.contact.selected && 'active'"><a  ng-click="changeRootPath('contact')">Contact</a></li>

            </ul>
            <h3 class="text-muted">Arena Club</h3>
</div>    

显示/隐藏加载栏的功能：

$scope.showLoader=function()
{
    $scope.loader.loading=true;
}
$scope.hideLoader=function()
{
    $scope.loader.loading=false;
}

以及附加到视图的控制器：

app.controller('ProductsController', ['$scope','productsFactory','commonFactory','productsFactoryHelper','$timeout',function ($scope,productsFactory,commonFactory,productsFactoryHelper,$timeout) 
                               {
var _init=function()
{
//loadAllProducts();
$scope.showLoader();
$timeout(loadAllProducts, 6000);
}

var loadAllProducts=function()
{
    productsFactory.query(function(response)
        {
        $scope.products=response;
        $scope.hideLoader();
        },function(error)
        {
            commonFactory.Pop('error','Ups! The products are not available at this moment. Please try again later. If the problem persists contact a system administrator');
        });
}   
_init();    
                               }]);