Angular watching for changes in $http.pendingRequests from directive

angularjs, angularjs-directive, javascript

Solution

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`

Problem

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 `$o`n 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?

Original source