Angular watching for changes in $http.pendingRequests from directive

Question

Hi I am new at Angular and am still trying to get a feeling of how things work.

I am creating a loaging box directive that will be based on a key which will be the url of the service.

What I would like to do is monitor changes in $http.pendingRequests and verify if any of the object inside of the array contains the key I give the loading box.Here is what I have so for:

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

});

First attempt - My first attempt was to try and watch changes on $http.pendingRequests based on $watch. What I expected to happen is every time an object was added to pendingRequests or removed my function would be executed.This did not work I think because the watched object has to be on the scope set...I am not really sure if this is the reason but this is my current understanding of the problem.

Second attempt - I created a HttpInterceptor and broadcasted ajaxStarted on request and ajaxCompleted on requestError, response, responseError. The problem in this case was that when I checked $http.pendingRequests in the drective $on events the pending request was not added yet.

Does anyone have any idea of how I can watch changes on the $http.pendingRequests object from the context of a directive?

Answer 1

I think you should be able to use the function() syntax in your watch.

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

Syntax is explained in the docs for $watch