Ответ диалогового окна подтверждения Sweet-alert

У меня есть функция, в которой я настраиваю свой диалог сладкого предупреждения. Я хочу использовать его во многих местах и ​​поэтому устанавливаю его в такой функции, как:

$rootScope.giveConfirmDialog = function(title,text,confirmButtonText,toBeExecFunction){
        swal({title: title,   
        text: title,
        .....
        confirmButtonText: confirmButtonText }, 
        toBeExecFunction);
    }

То, что я хочу сделать, просто: вызвать эту функцию где-нибудь и продолжить на основе ответа пользователя, таким образом:

var res = $scope.$root.giveConfirmDialog("..",
                "test", "test", function () {
                return true;
            });

Но я не принимаю никакого ответа. На самом деле, я не мог найти такой пример, и я думаю, что это не самый распространенный способ использования. Но как это возможно?


javascript angularjs sweetalert confirm
person Asqan    schedule 29.10.2015    source источник

Ответы (2)


arrow_upward
11
arrow_downward

Похоже, вам нужно другое поведение в зависимости от того, нажимает ли пользователь кнопку подтверждения или кнопку отмены.

SweetAlert предоставляет ответ пользователя через параметр функции обратного вызова.

Вот пример прямо из SweetAlert Docs:

swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false 
    },
    function(isConfirm) {
        if (isConfirm) {
            swal("Deleted!", "Your imaginary file has been deleted.", "success");
        } else {
            swal("Cancelled", "Your imaginary file is safe :)", "error");
        }
    }
);

В этом примере при нажатии кнопки подтверждения открывается новый SweetAlert, подтверждающий ваше действие, а при нажатии кнопки отмены открывается новый SweetAlert, отмечающий, что действие было отменено. Вы можете заменить эти вызовы любой функциональностью, которая вам нужна.

Поскольку эта библиотека использует асинхронные обратные вызовы, метод swal не возвращает значения.

Кроме того, было бы неплохо использовать такую ​​библиотеку, как ng-sweet- alert, чтобы обернуть вызовы в sweet alert, чтобы гарантировать, что любые изменения, которые вы делаете в обратных вызовах Sweet Alert, правильно подхватываются жизненным циклом angular. Если вы посмотрите исходный код ng-sweet-alert, вы увидите, что автор оборачивает вызовы swal и обратный вызов пользователя в $rootScope.$evalAsync, гарантируя, что angular обновится после завершения вызовов и обратных вызовов.

С точки зрения стиля кода было бы лучше поместить вашу логику в сервис или фабрику для повторного использования в вашей кодовой базе, а не просто прикреплять ее к $rootScope.

person Jon Quarfoth    schedule 29.10.2015
comment
я пытаюсь return isCofirm внутри swal, но это не работает swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel plx!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm) { return isConfirm } ); Можете ли вы предложить какие-либо изменения здесь - person ubm; 28.06.2017
comment
@ubm Ваш комментарий неясен. Похоже, вы просто неправильно понимаете, как обрабатывать асинхронный обратный вызов. Вы можете открыть новый вопрос с дополнительной информацией, если вы все еще боретесь. Короче говоря, все, что вы хотите сделать, когда оповещение подтверждено, должно быть внутри вашей функции обратного вызова. Прямо сейчас ваша функция обратного вызова возвращает логическое значение. Это ничего не делает, потому что вы возвращаете его внутреннему коду sweetalert, который не знает или не заботится о вашем возвращаемом значении. swal не возвращает значение. Ваш обратный вызов не должен возвращать значение. Просто выполните работу в обратном вызове. - person Jon Quarfoth; 29.06.2017

arrow_upward
1
arrow_downward

Вы не получите ответа, так как это асинхронно, вы можете использовать следующий фрагмент кода:

swal({
    title: "Are You Sure?",
    text: "Are you sure to go ahead with this change?",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes",
    cancelButtonText: "No",
    closeOnConfirm: true,
    closeOnCancel: true,
  },
  function(isConfirm){
    if (isConfirm) {
      $.ajax({
        url:"/path",
        method:"GET",
        data: {
          category_id: category_id,
        },
        success:function(response) {
           // tasks on reponse
        }
      })
    }
  }
);
person Apoorv    schedule 20.07.2017