Я использую AngularJs 1.6.1, Bootstrap 4.3 и UI Bootstrap 4. У меня есть большая форма, которая после отправки перенаправляет на другую страницу.В то время как отправка формы выполняет свою асинхронную публикацию, я отображаю модальное «Сохранение информации ...», и как только обещание возвращается, я запускаю window.location.href и после href устанавливаю модальное закрытие.
vm.save = (
function(goToDetails) {
if (vm.hasError_Overall) {
notificationService.danger("<h5>Error saving customer:</h5><h6>{0}</h6>".format(vm.SaveErrMsg));
} else {
vm.savingCustInfo = true;
api.saveCustomer({
custinfo: theFormData
})
.then(
function(response) {
if (response.error) {
notificationService.danger("<h5>Error saving customer:</h5><h6>{0}</h6>".format(response.error));
vm.savingCustInfo = false;
} else if (response.ErrorMessage) {
notificationService.danger("<h5>Error saving customer:</h5><h6>{0}</h6>".format(response.ErrorMessage));
vm.savingCustInfo = false;
} else {
/* Only run the Dist List save if it's needed */
if (vm.DistLists.length > 0)) {
api.saveDistLists({
distLists: vm.DistLists,
custId: vm.custId
})
.then(
function(dlResponse) {
if (dlResponse.error) {
notificationService.danger(
"<h5>Error saving customer. Unable to save distribution lists.:</h5><h6>{0}</h6>".format(dlResponse.error));
vm.savingCustInfo = false;
} else {
vm.redirectOnSave(goToDetails, isEdit);
}
}
)
.catch(
function(err) {
console.error(err);
notificationService.danger("<h5>An error occurred.</h5><h6>Details: {0}</h6>".format(err.statusText));
vm.savingCustInfo = false;
}
);
} else {
//This is the Redirect!!!
vm.redirectOnSave(goToDetails, isEdit);
}
}
}
)
.catch(
function(err) {
console.error(err);
notificationService.danger("<h5>An error occurred.</h5><h6>Details: {0}</h6>".format(err.statusText));
vm.savingCustInfo = false;
}
);
}
});
vm.redirectOnSave = (
function(goToDetails, isEdit) {
var saveMsg = "<h5>Customer {0} {1} successfully {2}.</h5>".format(vm.FirstName, vm.LastName, isEdit ? "updated" : "created");
notificationMessage.setProperty({
Message: saveMsg,
Success: true
});
if (goToDetails) {
/* redirect to Customer Details */
window.location.href = "/CustomerDetails#/" + vm.custId;
vm.savingCustInfo = false;
} else {
/* redirect to Customer Search */
window.location.href = "Search#/";
vm.savingCustInfo = false;
}
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
Перенаправление прекрасно работает, и модальное отображение, но проблема в том, что после завершения обратной передачи сохранения есть короткий момент, когда модальное закрытие иформа способна (если вы быстро) взаимодействуете до того, как произойдет перенаправление.
Как бы я продолжал держать модальный дольше открытым, чтобы к форме нельзя было прикоснуться, пока не произойдет перенаправление?