Angular beobachten für Änderungen in $ http.pendingRequests aus Direktive

Question

Hallo ich bin neu bei Angular und bin immer noch versucht, ein Gefühl dafür zu bekommen, wie die Dinge funktionieren.

Ich erstelle eine Loading-Box-Anweisung, die auf einem Schlüssel basiert, der die URL des Dienstes sein wird.

Was würde ich tun Monitor Änderungen in $ http.pendingRequests und überprüfen, ob einer das Objekt innerhalb des Arrays den Schlüssel enthält ich den Laden box.Here geben ist, was ich habe so für:

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

});

Erster Versuch - Mein erster Versuch war zu versuchen, Änderungen auf $http.pendingRequests basierend auf $watch zu beobachten. Was ich erwartet habe, ist jedes Mal, wenn ein Objekt zu pendingRequests hinzugefügt oder entfernt wurde, würde meine Funktion ausgeführt werden. Das hat nicht funktioniert, denke ich, weil das beobachtete Objekt auf dem Zielfernrohr eingestellt sein muss ... Ich bin nicht wirklich sicher, ob das ist der Grund, aber das ist mein derzeitiges Verständnis des Problems.

Zweiter Versuch - habe ich eine HttpInterceptor und ausgestrahlt ajaxStarted auf Anfrage und ajaxCompleted auf requestError, response, responseError. Das Problem in diesem Fall war, dass, als ich $http.pendingRequests in den drictive $o n Ereignissen überprüfte, die ausstehende Anfrage noch nicht hinzugefügt wurde.

Hat jemand eine Vorstellung davon, wie ich Änderungen am Objekt $http.pendingRequests aus dem Kontext einer Richtlinie beobachten kann?

Answer 1

Ich denke, Sie sollten in der Lage sein, die function() Syntax in Ihrer Uhr zu verwenden.

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

Syntax ist in der docs erklärt $watch

Answer 2

Variation der gerade eine Funktion

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