Я построил ответ @DavidLin, чтобы немного упростить его - убрав любую зависимость от jQuery в директиве. Я могу подтвердить, что это работает, поскольку я использую его в производственном приложении
function AjaxLoadingOverlay($http) {
return {
restrict: 'A',
link: function ($scope, $element, $attributes) {
$scope.loadingOverlay = false;
$scope.isLoading = function () {
return $http.pendingRequests.length > 0;
};
$scope.$watch($scope.isLoading, function (isLoading) {
$scope.loadingOverlay = isLoading;
});
}
};
}
Я использую ng-show
вместо вызова jQuery, чтобы скрыть / показать <div>
.
Вот тот, <div>
который я разместил чуть ниже открывающего <body>
тега:
<div ajax-loading-overlay class="loading-overlay" ng-show="loadingOverlay">
<img src="Resources/Images/LoadingAnimation.gif" />
</div>
И вот CSS, который обеспечивает наложение для блокировки пользовательского интерфейса во время вызова $ http:
.loading-overlay {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.loading-overlay:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
/* :not(:required) hides these rules from IE9 and below */
.loading-overlay:not(:required) {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
Кредит CSS принадлежит @Steve Seeger - его сообщение: https://stackoverflow.com/a/35470281/335545