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

Question

我有一个$ http请求,用于加载<select>标记的信息.我想显示某种加载掩码/图像,但我希望它只显示在页面的受影响部分.

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.