Question

我正在使用AngularJS开发一个webapp。当从服务器加载数据需要很长时间时，我想显示一个加载栏。

为了模拟大量的数据，我使用$ 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();    
                               }]);

Answer 1

如果没有看到控件的外观或设置方式，请参阅以下内容：

如果它们是HTML表单，您可以在输入中使用disabled属性。使用angular，您可以ng-disabled='loader.loading'。
您可以将整个加载屏幕放在叠加层中，或只是控件上的div，使用较高的z-index来保持其下方的项目无法点击。如果在加载器之外，您仍然可以使用与加载器相同的标志有条件地显示它。
您可以使用ngHide或ngIf指令隐藏/删除控件。

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

1 个答案: