当前位置: 首页 > 面试题库 >

Sweet-alert确认对话框的响应

强宾白
2023-03-14
问题内容

我有一个功能,可以汇总我的甜蜜提示对话框。我想在很多地方使用它,因此在类似以下的函数中进行设置:

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

但是我没有任何回应。实际上,我找不到这样的示例,我认为这不是常见的使用方式。但是怎么可能呢?


问题答案:

听起来您想要基于用户是否按下确认按钮或取消按钮的不同行为。

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回调中所做的任何更改都可以被角度生命周期正确地吸收。如果您查看ng-sweet-
alert的源代码,则会看到作者将调用包装swal和用户的回调包装在中$rootScope.$evalAsync,确保在调用和回调完成后角度更新。

从代码样式的角度来看,最好将逻辑放入服务或工厂中以在整个代码库中重用,而不是仅将其附加到$ rootScope。



 类似资料:
  • SweetAlert 是一个漂亮的 JavaScript 警告的替代品。它可以自动显示在页面中间,不论是在电脑上、手机上还是平板上都很好看,而且还高度定制化。 示例代码: swal({  title: "Are you sure?",  text: "You will not be able to recover this imaginary file!",  type: "warning",  

  • sweet-alert-dialog 是用于 Android 的 SweetAlert,清新文艺,快意灵动的甜心弹框。 安装 使用SweetAlertDialog最简单的办法就是像下面这样添加项目依赖。 Maven <dependency>  <groupId>cn.pedant.sweetalert</groupId>  <artifactId>library</artifactId>  <ve

  • Ng-sweet-alert 是 AngularJS 的警示指令,无需再编写 JavaScript 代码。

  • 本文向大家介绍javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框),包括了javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)的使用技巧和注意事项,需要的朋友参考一下 我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用a

  • 问题内容: 我正在开发一个程序,该程序可以从文本文件加载和保存数据,并且正在询问用户加载和保存JFileChooser的文件名。 这个问题与 保存 对话框有关:。然后,用户可以在没有任何警告的情况下覆盖现有文件,这 将是一个问题 。 关于如何解决此问题的任何建议?我一直在寻找某种方法或选项,但没有发现任何东西。 提前致谢。 问题答案: 感谢您提供答案,但是我发现了另一个解决方法,可以用这种方法覆盖

  • 问题内容: 我正在尝试使用自定义angularjs指令在上设置确认对话框: 这很好用,但不幸的是,未评估使用我的指令的标记内的表达式: (这种情况下不评估名称)。这似乎是由于我的指令的终端参数。您有解决方法的想法吗? 要测试我的代码,请执行以下操作:http : //plnkr.co/edit/EHmRpfwsgSfEFVMgRLgj?p=preview 问题答案: 如果您不介意不使用,则可以正常