Javascript Sweet-alert 确认对话框的响应
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33414259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Response from Sweet-alert confirm dialog
提问by Asqan
I have a function where i costumize my sweet-alert dialog. I want to use it in a lot of places and therefore set that in a function like:
我有一个功能,我可以将我的甜蜜警报对话框装扮起来。我想在很多地方使用它,因此将其设置为如下函数:
$rootScope.giveConfirmDialog = function(title,text,confirmButtonText,toBeExecFunction){
swal({title: title,
text: title,
.....
confirmButtonText: confirmButtonText },
toBeExecFunction);
}
What i want to do is simple: calling that function in somewhere and go on based on the answer of the user, thus:
我想做的很简单:在某处调用该函数并根据用户的回答继续,因此:
var res = $scope.$root.giveConfirmDialog("..",
"test", "test", function () {
return true;
});
But i don't take any response. Actually, i couldn't find such an example and i think its not the common way of use. But how can it be possible?
但我不接受任何回应。实际上,我找不到这样的例子,我认为这不是常见的使用方式。但怎么可能呢?
回答by Jon Quarfoth
It sounds like you want different behavior based on if the user presses the confirm button or the cancel button.
听起来您希望根据用户是按下确认按钮还是取消按钮来获得不同的行为。
SweetAlert exposes the user response via a parameter on the callback function.
SweetAlert 通过回调函数上的参数公开用户响应。
Here's an example straight form the SweetAlert Docs:
这是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");
}
}
);
In this example, when the confirm button is pressed, a new SweetAlert is opened, confirming your action, and if cancel button is pressed, a new SweetAlert is opened, noting that the action was cancelled. You can replace these calls with whatever functionality you need.
在这个例子中,当按下确认按钮时,一个新的 SweetAlert 被打开,确认你的操作,如果按下取消按钮,一个新的 SweetAlert 被打开,注意操作被取消。您可以使用您需要的任何功能替换这些调用。
Since this library is using async callbacks, there is not a return value from the swal
method.
由于此库使用异步回调,因此该swal
方法没有返回值。
Also, it would probably be good idea to use a library such as ng-sweet-alertto wrap calls to sweet alert to ensure that any changes you make in Sweet Alert callbacks are properly picked up by the angular lifecycle. If you check out the source for ng-sweet-alert, you'll see that the author wraps the calls to swal
and the user's callback in $rootScope.$evalAsync
, ensuring that angular updates when the calls and callbacks complete.
此外,使用诸如ng-sweet-alert 之类的库来包装对 Sweet Alert 的调用可能是个好主意,以确保您在 Sweet Alert 回调中所做的任何更改都被 angular 生命周期正确接收。如果您查看 ng-sweet-alert 的源代码,您会看到作者将 对 的调用swal
和用户的回调封装在中$rootScope.$evalAsync
,确保在调用和回调完成时角度更新。
From a code style perspective, it would be better to put your logic into a service or factory for reuse throughout your codebase rather than just attaching it to $rootScope.
从代码风格的角度来看,最好将您的逻辑放入服务或工厂中以便在整个代码库中重用,而不是仅仅将其附加到 $rootScope。
回答by Apoorv
You will not get response as this is async, you can use the following code snippet:
您不会得到响应,因为这是异步的,您可以使用以下代码片段:
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
}
})
}
}
);