global loader using block ui on angularjs

Posted: June 4, 2015 in web

index.html

include jquery too here
<script src="scripts/lib/jquery.blockUI.js"></script>

<body ng-app="rApp" some-loader>

directive

app.directive('someLoader', function ($http) {
 return {
 restrict: 'A',
 link: function (scope) {
 scope.$watch(
 function () {
 return $http.pendingRequests.length > 0;
 },
 function (val) {
 if (val) {
 $.blockUI({ message: '<span><img style="width:369px" src="http://www.jordiros.me/glgifomatic/images/loading.gif" /> <strong>Mat in Black</strong></span>' });
 }
 else {
 $.unblockUI();
 }
 }
 );

}
 };
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s