Obserwacja kątowa dla zmian w $ http.pendingRequests z dyrektywy

Question

Witam Jestem nowy w firmie Angular i nadal próbuję uzyskać wrażenie, jak działają rzeczy.

Tworzę dyrektywę o szkicach, która będzie oparta na kluczu, który będzie adresem URL usługi.

Co chciałbym zrobić, to zmiany monitora w $ http.pendingRequests i sprawdzić, czy któryś z obiektu wewnątrz tablicy zawiera klucz daję ładowanie box.Here co mam tak w przypadku:

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

});

Pierwsza próba - Moja pierwsza próba polegała na próbie obejrzenia zmian na $http.pendingRequests na podstawie $watch. To, czego się spodziewałem, to za każdym razem, gdy obiekt został dodany do pendingRequests lub usunięty zostałaby wykonana moja funkcja. To nie działało, myślę, ponieważ obserwowany obiekt musi znajdować się w zestawie oscyloskopu ... Nie jestem do końca pewien, czy to jest powód, ale to jest moje obecne zrozumienie problemu.

Druga próba - Stworzyłem HttpInterceptor i nadawane ajaxStarted na życzenie i ajaxCompleted na requestError, response, responseError. Problem w tym przypadku polegał na tym, że po sprawdzeniu $http.pendingRequests w zdarzeniach naprawczych $o oczekujące żądanie nie zostało jeszcze dodane.

Czy ktoś ma pojęcie, jak mogę oglądać zmiany w obiekcie $http.pendingRequests z kontekstu dyrektywy?

Answer 1

Myślę, że powinieneś być w stanie używać składni function() w zegarku.

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

Składnia jest wyjaśnione w docs dla $watch

Answer 2

odmianą oglądania funkcję

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