BlockUI pendant une fonction en Angular

Question

Dans une application web, il y a un bouton qui appelle une fonction. Comment puis-je faire si je veux insérer un blockUI pendant l'opération? Ai-je fait une promesse? Où en particulier?

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

la fonction:

destroylocalDB: function(){ 

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

Answer 1

Avez-vous regardé le Angular BlockUI?

Jetez un oeil à la documentation. Après configuration, vous aurez juste besoin de:

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:

Pour faire ce que vous voulez, vous devez changer votre service pour retourner la promesse:

destroylocalDB: function(){ 

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

Alors vous pouvez:

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

Je n'ai pas testé, mais cela devrait fonctionner.

Answer 2

Vous pouvez également utiliser une roulette pour bloquer votre interface utilisateur jusqu'à la fin de l'opération en arrière-plan. Quelque chose comme:

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