javascript - Sweet-alert 确认对话框的响应

Question

我有一个功能，我可以将我的甜蜜警报对话框装扮起来。我想在很多地方使用它，因此将其设置为如下函数:

$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;
            });

但我不接受任何回应。实际上，我找不到这样的例子，我认为这不是常见的使用方式。但怎么可能呢？

Answer 1

听起来您希望根据用户是按下确认按钮还是取消按钮来获得不同的行为。

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 之类的库可能是个好主意。包装对甜蜜警报的调用，以确保您在甜蜜警报回调中所做的任何更改都被 angular 生命周期正确接收。如果您查看 ng-sweet-alert 的源代码，您会看到作者将调用封装到 swal。以及用户在 $rootScope.$evalAsync 中的回调，确保在调用和回调完成时 Angular 更新。

从代码风格的 Angular 来看，最好将您的逻辑放入服务或工厂中以便在整个代码库中重用，而不是仅仅将其附加到 $rootScope。