BlockUI 在 Angular 中的函数期间

Question

在Web应用程序中，有一个调用函数的按钮。如果我想在操作过程中插入块UI，该怎么办？我有没有做过承诺？特别是在哪里？

$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 吗？

查看文档。配置后，您只需要：

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

编辑：

要做你想做的事，你需要改变你的服务来返回承诺：

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