无法让 showLoaderOnConfirm 与 SweetAlert2 一起使用答案

【问题标题】：Unable to get showLoaderOnConfirm working with SweetAlert2无法让 showLoaderOnConfirm 与 SweetAlert2 一起使用
【发布时间】：2016-09-02 05:46:00
【问题描述】：

我在让 showLoaderOnConfirm 使用 sweetalert2 和 ngSweetAlert 用于 AngularJS 时遇到问题。

下面的代码可以正常执行，没有错误，但是，我没有等待动画。请求返回后，警报将消失，然后再次弹出。

       $scope.passwordReset = function() {

            swal({
                title: 'Forgot Password?', 
                text: 'Enter your email address and your password will be reset and emailed to you.', 
                input: 'email', 
                showCancelButton: true, 
                confirmButtonText: 'Send', 
                confirmButtonColor: "#DD6B55", 
                inputPlaceholder: 'Email address', 
                showLoaderOnConfirm: true
            }).then(function( email ) {

                if( email ) {

                    AccountFactory.resetAccount( email )
                        .then(function( data ) {

                            swal({
                                title: 'Success!', 
                                text: 'A verification email has been sent to ' + email, 
                                type: 'success', 
                                confirmButtonText: 'Close', 
                                allowEscapeKey: false
                            });

                        }, function( error ) {

                            swal({
                                title: 'Email not found', 
                                text: 'Sorry, but we could not find an account matching that email address.', 
                                type: 'error', 
                                confirmButtonText: 'Close', 
                                allowEscapeKey: true
                            });

                            console.log( 'Failed to reset password: ', error );

                        });

                }

            });

        };

我尝试过使用preConfirm 函数，但这没什么区别。警报不会消失，而是会保留在屏幕上，但仍然没有动画。

我哪里错了？

我的AccountFactory 返回以下函数：

            resetAccount: function( email ) {

                var deferred = $q.defer();

                $http({
                    url: ApplicationConstants.apiServerPath + 'api/users/reset', 
                    method: 'POST', 
                    data: 'email=' + email, 
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                })
                .success( function( data ) {

                    deferred.resolve( data );   

                })
                .error( function( error ) {

                    deferred.reject( error );

                });

                return deferred.promise;

            }

【问题讨论】：

标签： javascript angularjs sweetalert sweetalert2

【解决方案1】：

您正在寻找正确的方向：preConfirm 是您需要在这里使用的。

这段代码应该适合你：

swal({
    title: 'Forgot Password?', 
    text: 'Enter your email address and your password will be reset and emailed to you.', 
    input: 'email', 
    showCancelButton: true, 
    confirmButtonText: 'Send', 
    confirmButtonColor: "#DD6B55", 
    inputPlaceholder: 'Email address', 
    showLoaderOnConfirm: true,
    preConfirm: function(email) {
        return AccountFactory.resetAccount(email)
    }
}).then(function( data ) {

    swal({
      title: 'Success!', 
      text: 'A verification email has been sent to ' + email, 
      type: 'success', 
      confirmButtonText: 'Close', 
      allowEscapeKey: false
    });

}, function( error ) {

    swal({
      title: 'Email not found', 
      text: 'Sorry, but we could not find an account matching that email address.', 
      type: 'error', 
      confirmButtonText: 'Close', 
      allowEscapeKey: true
    });

    console.log( 'Failed to reset password: ', error );

});

还可以查看 SweetAlert2 文档中的示例：https://sweetalert2.github.io/#ajax-request

【讨论】：

你的例子我似乎也没有取得太大的成功。当未找到电子邮件时，我可以验证我的工厂是否返回错误，但它永远不会返回function( error ) { }，因此警报仍然在屏幕上。我已经更新了我的帖子以显示我的工厂代码。