如何在angularjs中为页面的一部分制作加载掩码？

Question

我有一个$ http请求，用于加载＆lt; select＆gt;的信息标签。我想显示某种加载蒙版/图像，但我希望它只显示在页面的受影响部分。

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

我希望#needs-loading-mask被加载掩码遮挡而$ scope.loadingVariants为真，但我无法弄清楚如何让它浮动选择，填充父字段集使用声明性语法。

我无法删除选择字段，因为它会对Tab顺序造成严重破坏，但似乎应该可以在其前面浮动某些内容。

Answer 1

$http知道它的工作

简单的方法，只有一个布尔管理：

声明这样的服务：

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

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

        return httpRequestTracker;
    }]);

在您的主控制器（通常是app控制器）中：

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

在您的网页中，无论您想要什么，都可以：

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

这里的魔力是http.pendingRequests.length method。

Answer 2

在angulajs中请求跟踪器。

angular.module('services.httpRequestTracker', [])
.service('httpRequestTracker', ['$http', function ($http) {
    var httpRequestTracker = {};
    httpRequestTracker.hasPendingRequests = function () {
        return $http.pendingRequests.length > 0;
    };

    return httpRequestTracker;
}]);