How-To: Во время перенаправления AngularJS держать модальный открытым? - PullRequest
0 голосов
/ 14 февраля 2019

Я использую 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>

Перенаправление прекрасно работает, и модальное отображение, но проблема в том, что после завершения обратной передачи сохранения есть короткий момент, когда модальное закрытие иформа способна (если вы быстро) взаимодействуете до того, как произойдет перенаправление.

Как бы я продолжал держать модальный дольше открытым, чтобы к форме нельзя было прикоснуться, пока не произойдет перенаправление?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...