How to make a loading mask for a portion of a page in angularjs?

angularjs, css

Solution

`$http` is aware of its job

Easy way, with only one boolean management:

Declare a service like this:

angular.module('services.httpRequestTracker', [])
    .factory('httpRequestTracker', ['$http', function ($http) {

        var httpRequestTracker = {};
        httpRequestTracker.hasPendingRequests = function () {
            return $http.pendingRequests.length > 0;
        };

        return httpRequestTracker;
    }]);

In your main controller (usually app controller):

$scope.hasPendingRequests = function () {
   return httpRequestTracker.hasPendingRequests();
};

And wherever you want in your page, something like:

<div z-index=100 ng-show="hasPendingRequests()><img src="img/loading.gif" /></div>

The magic here is thus the `http.pendingRequests.length method`.

Problem

I have a $http request that loads information for a <select> tag. I want to show some kind of loading mask/image, but I want it to only display over the affected part of the page. HTML ``` <select ng-model='widgetType' ng-options="widget.name for widget in allWidgets track by widget.id"> <fieldset id="needs-loading-mask" ng-disabled="widgetType.id"> <div z-index=100 ng-if="loadingVariants"><img src="img/loading.gif" /></div> <select ng-model='widgetVariant' ng-optoins="variant.name for variant in allVariants track by variant.id> <fieldset> ``` JS ``` $scope.$watch('widgetType.id', function(newValue, oldValue) { if(newValue) { $scope.loadingVariants = true; console.log("Getting variants from server"); $timeout(function() { // only here for debug purposes $http.get('/api/widget-variants/?widget=' + newValue) .success(function (data) { $scope.allVariants = data; $scope.loadingvariants = false; }).error(function (data) { $scope.loadingvariants = false; }); }, 1000); } else { $scope.allVariants = []; } }); ``` I'm wanting `#needs-loading-mask` to be occluded by a loading mask while $scope.loadingVariants is true, but I can't figure out how to get it to float OVER the select, filling the parent fieldset using a declarative syntax. I can't remove the select field because that plays havoc with tab order, but it seems like it should be possible to float something in front of it.

Original source