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