Angular监视指令中$ http.pendingRequests的更改

Question

嗨,我是Angular的新人,我仍然想要了解事情的运作方式.

我正在创建一个基于密钥的loaging box指令,该密钥将是服务的url.

我想要做的是监视$ http.pendingRequests中的更改,并验证数组中的任何对象是否包含我给加载框的密钥.这就是我所拥有的:

define(['angular', './../../module'], function (angular, directivesModule) {
directivesModule.directive('loadingBoxDir', ['EVENTS', '$http', function (EVENTS, httpExtenderSvc) {
    var headerDir = {
        restrict: 'E',
        templateUrl: 'App/scripts/main/directives/loadingBox/LoadingBoxDir.html',
        scope: {
            loadingKey: '=',
        }
    };

    headerDir.link = function (scope, element) {
        element.hide();
        displayRotatingBox(scope, element);

        //first failed attempt 
        scope.$watch($http.pendingRequests, function() {
            //logic executed to display or hide loading box
        });

        //second failled attempt
        scope.$on('ajaxStarted', function () {
            //display or hide rotating box based on $http.pendingRequests
        });

        //second failled attempp
        scope.$on('ajaxCompleted', function () {
            //display or hide rotating box based on $http.pendingRequests
        });
    };

    var isRotatingBoxActive = false;

    function displayRotatingBox(scope, element) {
        var pendingRequests = httpExtenderSvc.getPendingRequests();
        angular.forEach(pendingRequests, function (request) {
            if (request.url.indexOf(scope.loadingKey) !== -1) {
                element.show();
                isRotatingBoxActive = true;
            }
        });
    }

    function hideRotatingBox(element) {
        if (isRotatingBoxActive) {
            element.hide();
        }
    }

    return headerDir;
}]);

});

第一次尝试 - 我的第一次尝试是尝试观察$http.pendingRequests基于的变化$watch.我期望发生的是每次添加pendingRequests或删除一个对象我的函数都会被执行.这不起作用我认为因为被监视的对象必须在范围集上...我不确定这是否是但是这是我目前对这个问题的理解.

第二次尝试-我创建了一个HttpInterceptor和要求广播ajaxStarted和ajaxCompleted上requestError,response,responseError.在这种情况下的问题是,当我检查$http.pendingRequestsdrective $on事件时,尚未添加待处理请求.

有没有人知道如何$http.pendingRequests从指令的上下文中观察对象的变化？

Answer 1

我认为你应该能够function()在手表中使用语法.

scope.$watch(function() {
    return $http.pendingRequests.length;
}, function() {
    //logic executed to display or hide loading box
});

语法是在说明文档的$watch

Answer 2

观看功能的变化

scope.$watch(function() {
    return $http.pendingRequests.length > 0;
}, function(hasPending) {
    if (hasPending) {
        // show wait dialog
    }
    else  {
         // hide wait dialog
    }
});