BlockUI während einer Funktion in Angular

Question

In einer Web-App gibt es eine Schaltfläche, die eine Funktion aufrufen. Wie kann ich tun, wenn ich während des Vorgangs ein blockUI einfügen möchte? Habe ich ein Versprechen gegeben? Wo insbesondere?

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

die Funktion:

destroylocalDB: function(){ 

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

Answer 1

Haben Sie die Angular BlockUI geschaut?

Werfen Sie einen Blick auf die documentation. Nach der Konfiguration müssen Sie nur zu:

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:

zu tun, was Sie wollen, müssen Sie Ihren Dienst ändern, um die Versprechen zurückzukehren:

destroylocalDB: function(){ 

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

So Sie können:

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

Ich habe nicht getestet, aber es sollte funktionieren.

Answer 2

Sie können Ihre Benutzeroberfläche auch mit einem Drehfeld blockieren, bis der Hintergrundvorgang abgeschlossen ist. Etwas wie:

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