Display Loading.. gif in angular-blockUI plugin

Question

I have used blockUI PLUGIN from https://github.com/McNull/angular-block-ui

Problem i'm facing is that i want to dislay loading gif along with Saving Synids... Message. So how can i do that.

$scope.saveDefSynId = function(item, event) {
        if($rootScope.savedSynids.length!==0){
            **blockUI.start({message: 'Saving Synids...'});**
            var toSaveSynid=[];

            angular.forEach($rootScope.savedSynids, function(value){
                if(value.isSaved=='Y'|| value.isUpdated=='Y'){ 
                    toSaveSynid.push(value);
                }      
            });  

            var clientId=$scope.selClient;
            var responsePromise = $http.post("defineSaveSynId/"+clientId,toSaveSynid);

            responsePromise.success(function(data, status, headers, config) {
                $rootScope.savedSynids=[];
                $scope.eMsg="Synids Saved Successfully";
                 **blockUI.stop();**
            });
            responsePromise.error(function(data, status, headers, config) {
                alert("AJAX failed!");
            });
    }

No changes has been done to jsp for this plugin.

Answer 1

As per the documentation, you need to change the default value.

// Change the default overlay message
blockUIConfig.message = 'Saving Synids...';

example

angular.module('myApp').config(function(blockUIConfig) {

  // Change the default overlay message
blockUIConfig.message = 'Saving Synids...';

// Change the default delay to 100ms before the blocking is visible
blockUIConfig.delay = 100;

});

source: http://angular-block-ui.nullest.com/#!/examples/documentation