CODEWITHSUNDEEP
javascripthtmlangularjs
fgonzalez
fgonzalez

Reputation: 3887

Disabling controls when showing loading bar in AngularJS

I'm developping a webapp using AngularJS. I would like to show a load bar when the load of the data from the server takes very long.

To simulate a huge load of data I use $timeout, and I show the loadbar when the operation starts and I hide it when the operation ends.

The problem I'm facing is that, of course I'm only displaying a animated image when the operation starts, so all the controls (button,links, etc) are still available to click during the load of the data. I would like to find a way to disable all the controls during the load process to avoid the user to click on them.

Could you please help me here? Thank you very much in advance!

Some of my code if it helps:

My controls in 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>

The functions to show/hide the loading bar:

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

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

And the controller attached to the view:

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();    
                               }]);

Upvotes: 0

Views: 2209

Answers (1)

mikegertrudes
mikegertrudes

Reputation: 653

Without seeing what your controls look like or how they are set up, here are some ideas:

  • If they are an HTML form, you can use disabled attribute on your inputs. With angular, you could do ng-disabled='loader.loading'.
  • You could put your entire loading screen in an overlay or just a div over the controls, with a higher z-index to keep the items below it from being clickable. If outside of the loader, you could still conditionally show it using the same flag as the loader.
  • You could have the controls hide/remove themselves using the ngHide or ngIf directives.

Upvotes: 1

Related Questions