Question

如何正确实现该用例：在客户确认操作后我想显示一个等待屏幕，直到完全执行回调功能...

我已完成以下操作但在调用srv.hideLoadingScreen()之后执行REST调用...： - /

DialogService：

srv.onApprove = function(callback){
    srv.displayLoadingScreen();
    callback();
    srv.hideLoadingScreen();
};

控制器：

ctrl.showConfirmModal = function(){
    //...
    if(approved){
        DialogService.onApprove(function(){
            ctrl.performAction();
        });
    }
};

ctrl.performAction = function(){
    console.log('performAction');
    if(angular.isDefined(ctrl.selectedNumberList)){
        var numberList = {
            nbList: ctrl.selectedNumberList
        };
        MyService.launch(numberList, function(response){ // REST call
            console.log('call ok');
        }, function(error){
            console.log('error');
        });
    }
};

的更新目前我选择了这个避免回调的回调的解决方案：关闭ctr.perfomAction()

中的等待面板

MyService.launch(numberList, function(response){ // REST call
    console.log('call ok');
    DialogService.hideLoadingScreen();
}, function(error){
    console.log('error');
    DialogService.hideLoadingScreen();
});

Answer 1

您可以使用the $http service返回Promise。

在完成并且调用堆栈清除之前，不会返回异步操作。由于我们会在返回范围之前离开范围，因此您可以使用Promise来确保获得价值。

app.service('MyService', function($http) {
  this.launch = function launch() {
    return $http({ method: 'GET', url: '/endpoint' });
  };
}

app.controller('MyCtrl', function(MyService) {
  MyService.launch()
     .then(function(response) {

     });
});

使用$q服务也可以实现相同的效果，以便为任何类型的异步调用返回一个承诺。

Answer 2

使用Angular-busy。这种方式适合你：

<强> 应用

bower install angular-busy --save
将dist/angular-busy.js和dist/angular-busy.css添加到您的帐户中 index.html
添加cgBusy作为模块的模块依赖项。
angular.module('your_app', ['cgBusy']);

CONTROLLER

   $scope.myPromise = MyService.launch(numberList, function(response){ // REST call...

<强> 偏

        <div cg-busy="{promise:myPromise,
                       message:'Loading',
                       backdrop:false,
                       templateUrl:'myAwesomeTemplate.html',
                       delay:300,
                       minDuration:700} ">
         </div>

为您的评论编辑：

这样的事情怎么样？

 MyService.launch(numberList, function(response){
  ----->     $scope.myPromise = console.log('call ok');     <--------
        }, function(error){
            console.log('error');
        });

如何等待回调函数的返回？

2 个答案: