BlockUI during a function in Angular

Question

In a web-app there is a button which call a function. How can I do if I want to insert a blockUI during the operation? Have I do a promise? Where in particular?

$scope.eraseDB = function(){
    database.destroylocalDB();
};

the function:

destroylocalDB: function(){

  localDB.destroy().then(function (response) {        
      //Remove cache
      datacache.dr = [];
      database.initDB();
  }).catch(function (err) { 
      console.log(err);
  });       
}

Answer 1

Have you looked the Angular BlockUI?

Take a look at the documentation. After configuration, you will just need to:

destroylocalDB: function(){
  blockUI.start(); 
  localDB.destroy().then(function (response) {  
      blockUI.stop();      
      //Remove cache
      datacache.dr = [];
      database.initDB();
  }).catch(function (err) { 
      blockUI.stop();
      console.log(err);
  });       
}

EDIT:

To do what you want, you would need to change your service to return the promise:

destroylocalDB: function(){

  return localDB.destroy().then(function (response) {        
      //Remove cache
      datacache.dr = [];
      database.initDB();
  }).catch(function (err) { 
      console.log(err);
  });       
}

So you can:

$scope.eraseDB = function(){
    blockUI.start(); 
    database.destroylocalDB().then(function(){
        blockUI.stop();
    });
};

I didn't test, but it should work.