Creating an ajax loading spinner using a directive in Angularjs

Question

I'm trying to create a simple loader. Below is what I have done so far. Could someone please take a look and let me know where I'm going wrong?

It appears the CSS styles loading style-2 are not being added. my DOM just shows:

<span class=""></span>

My directive:

angular.module('loaderModule', [
    'restangular',
])

.controller('appLoaderController', ['$scope', function ($scope) {
    $scope.$on('LOAD', function () {
        $scope.loading = "loading style-2"
    });
    $scope.$on('UNLOAD', function () {
        $scope.loading = ""
    });
}])

.directive('spinLoader', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<span class="{{ loading }}"></span><div ng-transclude ></div>'
    };
});

HTML:

<spin-loader>
    <div ui-view></div>
</spin-loader>

I then just use it by calling: $scope.$emit('LOAD')

you might want to have a look at stackoverflow.com/questions/17838708/… — Bhalchandra K
– Bhalchandra K, Commented Dec 23, 2013 at 9:12
@Balachandra thats a nice way of doing it for ajax, but I went for a different solution so that I can call the spinner anytime. — Prometheus
– Prometheus, Commented Dec 23, 2013 at 9:15
@dfsq I see yes, strange then, but me something else going on here for me then as I just get a blank class — Prometheus
– Prometheus, Commented Dec 23, 2013 at 9:35
@dfsq I see the issue now I needed to add in ng-controller="appLoaderController"as you did in your code. thanks — Prometheus
– Prometheus, Commented Dec 23, 2013 at 9:38

Craig Morgan · Accepted Answer · 2014-01-08 15:30:47Z

I would make use of ng-class in your directive like this:

    app.directive('spinLoader', function() {
        return {
            restrict: 'E',
            transclude: true,
            template: '<div ng-class="{loading: isLoading, style2: isLoading}" ng-transclude></div>'
        };
    });

In your controller you can then set $scope.isLoading to be true or false.

app.controller('Ctrl', function ($scope) {

        var dummyLoadingVariable = false;

        $scope.$on('LOAD', function () {
            $scope.isLoading = true;
        });
        $scope.$on('UNLOAD', function () {
            $scope.isLoading = false;
        });

        $scope.toggleLoading = function(){
            dummyLoadingVariable = !dummyLoadingVariable;

            if(dummyLoadingVariable){
                $scope.$emit('LOAD');
            } else {
                $scope.$emit('UNLOAD')
            }
        }

    });

And the HTML to test it:

isLoading: {{ isLoading }}
<br/>
<spin-loader>
    <div ui-view>Transcluded</div>
</spin-loader>

<br/>
<button ng-click="toggleLoading()">toggleLoading()</button>

Here's a Plunk with it running: http://plnkr.co/edit/SetecF03aY6TnQilryWt?p=preview

Collectives™ on Stack Overflow

Creating an ajax loading spinner using a directive in Angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related