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

嗨，我是Angular的新手，并且仍在尝试了解事物的工作方式。

我正在创建一个将基于键的服务箱指令，该键将是服务的URL。

我想做的是监视$ http.pendingRequests中的更改并验证数组内部的任何对象是否包含我提供的加载框的 key ，这就是我的目的:

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。在这种情况下的问题是，当我在doctive $http.pendingRequests n事件中检查$o时，尚未添加待处理的请求。

有谁知道如何从指令的上下文中监视$http.pendingRequests对象的更改？

最佳答案

我认为您应该可以在 watch 中使用function()语法。

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

docs中的$watch解释了语法