AngularJS:How请求持续一分钟时取消block-ui弹窗？

Question

在我的 AngularJS 项目中，当有 api 个请求时，我编写自定义指令为 div 添加 block-ui：

 angular.module('wapDirectives')
.directive('blockui', function () {
    return {
        replace: true,
        restrict: 'A',        
        scope: {
            option: '=blockOption',
            isShow: '=blockShown'
        },
        link: function (scope, element, attrs, ctrl) {

            scope.$watch('isShow', function (newValue) {
                if (angular.isDefined(newValue) && newValue) {
                    element.block(scope.option);
                } else {
                    element.unblock();
                }
            });

        }
    }
});

html:

 <div class="col-md-9 col-sm-3" style="padding: 0px"  blockui block-option="blockOption"
    block-shown="hasShown ">
 </div>

js:

$scope.hasShown = true;
$q.all(promises).then(function (results) {
   $scope.hasShown = false;
   //other code
});

当我在请求前设置 $scope.hasShown = ture 并在结果 return 成功时设置 $scope.hasShown = false 时效果很好。

但是，当请求没有return成功时，由于其他reasons:service已经挂断，请求消耗了太多时间...块将永远在那里。

我想修改指令使其在全球范围内工作：当 blcok 持续 60 秒时它将自动取消并向用户发送对话框或刷新页面。

如何简单的做？

Answer 1

你可以试试这个功能

setInterval(function(){$scope.hasShown = false;},3000);

Answer 2

我是用$interval来实现的，但是想知道有没有更好的方案

angular.module('wapDirectives')
.directive('blockui', function () {
    return {
        replace: true,
        restrict: 'A',        
        scope: {
            option: '=blockOption',
            isShow: '=blockShown'
        },
        controller: function ($scope, $element,$interval,wapPromptService,settingInfo) {
            $scope.firstTimeSetBlock = null;
            $interval(function(){    
                if($scope.firstTimeSetBlock){
                    var timeDiff = moment().diff($scope.firstTimeSetBlock) / 1000;
                    if(timeDiff >= 60){
                        $scope.firstTimeSetBlock = null;
                        $element.unblock();
                        wapPromptService.error("an error occurred");
                    }
                }
            },1000);
        },
        link: function (scope, element, attrs, ctrl) {
            scope.$watch('isShow', function (newValue) {             
                if (angular.isDefined(newValue) && newValue) {
                    scope.firstTimeSetBlock = moment();
                    element.block(scope.option);
                } else {
                    scope.firstTimeSetBlock = null;
                    element.unblock();
                }
            });

        }
    }
});

AngularJS:How请求持续一分钟时取消block-ui弹窗？

AngularJS:How to cancel the block-ui popup when the request lasts for one minute?

javascript

blockui

jquery-blockui

angularjs