Angularjs loading screen on ajax request

by

Instead of setting up a scope variable to indicate data loading status, it is better to have a directive does everything for you:

angular.module('directive.loading', [])

    .directive('loading',   ['$http' ,function ($http)
    {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs)
            {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                };

                scope.$watch(scope.isLoading, function (v)
                {
                    if(v){
                        elm.show();
                    }else{
                        elm.hide();
                    }
                });
            }
        };

    }]);

With this directive, all you need to do is to give any loading animation element an ‘loading’ attribute:

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="https://stackoverflow.com/questions/17144180/..." /></div></div>

You can have multiple loading spinners on the page. where and how to layout those spinners is up to you and directive will simply turn it on/off for you automatically.

More Related Contents:

  1. How to set focus on input field?
  2. angular ng-bind-html and directive within it
  3. How to call a method defined in an AngularJS directive?
  4. How to use a keypress event in AngularJS?
  5. Angular directives – when and how to use compile, controller, pre-link and post-link [closed]
  6. Angularjs dynamic ng-pattern validation
  7. What is the difference between ng-app and data-ng-app?
  8. Easiest way to pass an AngularJS scope variable from directive to controller?
  9. Using angularjs filter in input element
  10. if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  11. Directive isolate scope with ng-repeat scope in AngularJS
  12. calling method of parent controller from a directive in AngularJS
  13. Enable angular-ui tooltip on custom events
  14. Accessing attributes from an AngularJS directive
  15. Custom form validation directive to compare two fields
  16. How to modify scope from within a directive in AngularJs
  17. Binding variables from Service/Factory to Controllers
  18. AngularJS custom form component / directive using ng-model
  19. How can you limit the value from input using AngularJS?
  20. How to set the dynamic controller for directives?
  21. Can you change templateUrl on the fly?
  22. Enable/Disable Anchor Tags using AngularJS
  23. What is `priority` of ng-repeat directive can you change it?
  24. Illegal use of ngTransclude directive in the template
  25. How to use `replace` of directive definition?
  26. How to implement an ng-change for a custom directive
  27. How to create a directive with a dynamic template in AngularJS?
  28. Access Parent Scope in Transcluded Directive
  29. how do I get ng-include directive to work with a Content Delivery Network?
  30. AngularJS – Directives vs Controllers

Leave a Comment