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

}）;

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

第二次尝试-我创建了一个HttpInterceptor和请求和广播ajaxStarted ajaxCompleted上requestError ， response ， responseError 。 在这种情况下的问题是，当我在drective $o n事件中检查$http.pendingRequests ，尚未添加挂起的请求。

有没有人知道如何从指令的上下文中查看$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
    }
});

Answer 3

我有点迟了但这是像素比特的改进答案：

scope.isBusy = function () {
    return $http.pendingRequests.length > 0;
};
scope.$watch(scope.isBusy, function (hasPending) {
    if (hasPending) {
      elm.show();
    } else {
      elm.hide();
    }
});

你可能想把它放在这样的指令中：

.directive('loadingBoxDir', ['$http', function ($http) {
    return {
       restrict: 'A',
       link: fn_link
    };
    function fn_link(scope, elm) {
       scope.isBusy= function () {
           return $http.pendingRequests.length > 0;
       };
       scope.$watch(scope.isBusy, function (hasPending) {
           if (hasPending) {
              elm.show();
           } else {
              elm.hide();
           }
       });
    }
}]);