Angular 中的函数期间的 BlockUI

Question

在网络应用程序中有一个调用函数的按钮。运行中想插入blockUI怎么办？我答应了吗？具体是哪里？

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

函数：

destroylocalDB: function(){

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

Answer 1

你看过 Angular BlockUI 了吗？

看看documentation。配置完成后，您只需：

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);
  });       
}

编辑:

要实现您的愿望，您需要将服务更改为 return 承诺：

destroylocalDB: function(){

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

所以你可以：

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

我没有测试，但应该可以。

Answer 2

您还可以使用微调器来阻止您的 UI，直到您的后台操作完成。类似于：

http://ngmodules.org/modules/angular-spinner

Angular 中的函数期间的 BlockUI

BlockUI during a function in Angular

javascript

blockui

promise

angularjs