Angular watching for changes in $http.pendingRequests from directive

angularjs http interceptor
angular ihttpservice
angularjs $http post json example
angularjs http error handling
angular http post
angularjs $http delete
angularjs http cache
angular http timeout

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?

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

Angular watching for changes in $http.pendingRequests from , Get code examples like "Angular watching for changes in $http.pendingRequests from directive" instantly right from your google search results� Angular provides lifecycle hooks for change detection. OnChanges is an interface and has a method declaration i.e ngOnChanges() . In parent-child component, the child component declares @Input() property to get values from parent component.

Variation of watching a function

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

More fun with AngularJS $http: a loading indicator, REST service? With $http you can easily set something up like this, without having to create a lot of overhead in your controllers. First we start off by setting up the directive structure itself: Now, to detect changes in $http. pendingRequests , we'll have to use a watch expression using scope.$watch() . The Angular change detection mechanism is much more transparent and easier to reason about than its equivalent in Angular 1. But there are still situations (like when doing performance optimizations) when we really need to know what's going on under the hood.

I am a little bit late but this is an improvement on pixelbits answer:

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

You may want to put this in a directive like this:

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

AngularJS: API: $http, and $http has no pending requests. angular-on-ready.js. 'use strict';. angular. module('theApp') .directive('onReady', function ($rootScope, $http, $timeout) {. An Attribute directive changes the appearance or behavior of a DOM element. Try the Attribute Directive example / download example. Directives overviewlink. There are three kinds of directives in Angular: Components—directives with a template. Structural directives—change the DOM layout by adding and removing DOM elements.

Trigger event when angular has finished loading and $http has no , Ben Nadel explores the $http request / response interceptors and demonstrates that to track and monitor HTTP requests within an AngularJS application. outgoing requests and then decrement pending requests on the way back. interceptor may completely change the outgoing config or the incoming. A comprehensive introduction to the world of Angular with great code samples to help readers get started. Tanya Wilke, Sanlam. Angular in Action teaches you everything you need to build production-ready Angular applications.Thoroughly practical and packed with tricks and tips, this hands-on tutorial is perfect for web devs ready to build web applications that can handle whatever you throw at them.

Monitoring $http Activity With $http Interceptors In AngularJS, If I update or submit a form, the button will disable until the http response is complete. </button> </ng-form> </div> I am new to AngularJS, please help me write a directive for this. pendingRequests.length > 0; }, function(request) { if (! request) watch('confirmIf', function(newVal) { if (newVal) { reBind(bindConfirm); } else� For months now we have been watching the Angular development team closely, waiting for updates and counting down to the big release. Now, the wait is finally over. Angular version 9.0.0 is officially here. Angular 9 is a major release that adds a number of changes to the ecosystem. The most notable change is Ivy.

How to disable buttons until http request is processed/loaded in , pendingRequests中的更改,并验证数组中的任何对象是否包含我给 Angular watching for changes in $http.pendingRequests from directive. Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.