How to implement loading directive AngularJS

Question

I am trying to implement loading sniper... But problem is when I put sniper inside html it not working. here is my direcitve:

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


function loading($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();
                }
            });
        }
    };
}

Here is my html:

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" /></div></div>

In my commentsController I added like this:

angular.module('commentsApp')
        .controller('CommentsCtrl',function(loading){

Anyone know what is problem?

Could please add a Plunkr? Ideally with a button "create xhr request". — David Votrubec
– David Votrubec, Commented Sep 17, 2015 at 10:48
The first issue I see is that your directive is called loading, but in html you call it data-loading. — Diana R
– Diana R, Commented Sep 17, 2015 at 10:51
what do u need the loader for? Is it gonna be dynamically used for promises? or just render while loading images? — Imab Asghar
– Imab Asghar, Commented Sep 17, 2015 at 10:59

Joy · Accepted Answer · 2015-09-17 11:29:54Z

2

Check working demo: JSFiddle. Your problem is maybe just because angular.element does not have functions show and hide.

scope.isLoading = function () {
    scope.remained = $http.pendingRequests.length;
    return $http.pendingRequests.length > 0;
};
scope.iAmLoading = scope.isLoading();

scope.$watch(scope.isLoading, function (v) {
    scope.iAmLoading = v;
    if (!v) console.log('All loaded');
});

And HTML:

<div ng-show="iAmLoading" loading>Loading ({{ remained }} remainded) ...</div>

edited Sep 17, 2015 at 11:29

answered Sep 17, 2015 at 10:51

Joy

9,60011 gold badges50 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to implement loading directive AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related