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

Question

In my AngularJS project, I write custom directive to add block-ui for div when there are api requests:

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

It works well when I set $scope.hasShown = ture before the request and $scope.hasShown = false when the result returns successfully.

However, when the request does not return successfully due to some other reasons:service has hung up, request consumes too much time... the block will always there.

I want to modify the directive to make it work globally: when the blcok lasts for 60s it will cancel automatically and send a dialog to user or refresh page.

How to do it simply?

Answer 1

I use $interval to make it, but I would like to know if there are better solutions.

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

        }
    }
});

Answer 2

you can try this function

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