AngularJS确认和承诺(AngularJS validation and promises)

2019-10-21 11:46发布

在角应用,形式通过自定义功能的JS,然后提交验证。 基于一个条件,我需要显示一个确认对话框给用户,等待确认或拒绝,然后验证进行。 我在与异步实现这一目标的困难。 我相信我没有正确使用的承诺,但不知道需要更新的内容。

app.factory("confirmDialogService", ['$q', 'ngDialog',
  function ($q, ngDialog ) {
  return {
    popConfirm: function () {
        var deferred = $q.defer();
        var confirmed;
        setTimeout(function () {
                ngDialog.openConfirm({
                    template: 'template/confirmDialog.html',
                    className: 'ngdialog-theme-default'
                }).then(function (value) {
                    console.log('Modal promise resolved. Value: ', value);
                    deferred.resolve(confirmed =  true);
                }, function (reason) {
                    console.log('Modal promise rejected. Reason: ', reason);
                    deferred.reject(confirmed =  false);
                });
        }, 1000);
        return deferred.promise;
      }
  };
}]);

调节器

  $scope.checkSomething = function (){
    if(needsConfirmation)
    {
        console.log('about to pop confirm');
        confirmationService.popConfirm().then(function(confirmed){
            console.log( 'from popConfirm() ' + confirmed + ''); // never logged
            return confirmed;
        }, function(){
        // something went wrong
            return false;
        });
    }
    else
        return true;
}

确认对话框显示,但点击yes或no的对话框中没有按预期产生的结果。

我希望能够做的就是根据用户是否确认或驳回的对话框中,沿着线真/假值

var canProceed = $scope.checkSomething();

我想我需要把这个包到另一个希望,但是不知道如何。 任何帮助将不胜感激。

谢谢,

Answer 1:

由于openConfirm已经返回一个承诺,你并不需要建立一个更$q.defer()

app.factory("confirmDialogService", ['$q', 'ngDialog', function ($q, ngDialog) {
    return {
        popConfirm: function () {
            return ngDialog.openConfirm({
                template: 'template/confirmDialog.html',
                className: 'ngdialog-theme-default'
            }).then(function (value) {
                console.log('Modal promise resolved. Value: ', value);
                return true;
            }, function (reason) {
                console.log('Modal promise rejected. Reason: ', reason);
                return false;
            });
        }
    };
}]);

之后checkSomething会使用这种方式:

$scope.checkSomething = function () {
    if (needsConfirmation) {
        return confirmationService.popConfirm().then(function (confirmed) {
            return confirmed;
        }, function () {
            return false;
        });
    } else {
        return $q.when(true);
    }
}

注意它是如何不再返回truefalse ,而是一个承诺对象。 最后,你应该使用$scope.checkSomething()像承诺异步操作:

$scope.checkSomething().then(function() {
    // ok, proceed
}, function() {
    // something failed
});

总之,最重要的还是要了解它是checkSomething应该返回一个承诺,不只是真/假。



Answer 2:

你不需要变量将它传递的resolvereject的方法(但它的工作):

           .then(function (value) {
                console.log('Modal promise resolved. Value: ', value);
                deferred.resolve(true);
            }, function (reason) {
                console.log('Modal promise rejected. Reason: ', reason);
                deferred.reject(false);
            });

然后控制器:

$scope.checkSomething = function (){
    if(needsConfirmation)
    {
        console.log('about to pop confirm');
        confirmationService.popConfirm().then(function(confirmed){
            console.log( 'from popConfirm() ' + confirmed + ''); // never logged
            return confirmed; <-- this is not(!) a return of checkSomething method, this is return of success callback
        }, function(){
        // something went wrong
            return false; //same as above
        });
    }
    else {
        return true;
    }
}

所以你不能做var canProceed = $scope.checkSomething();

你需要设置里面回调这个变量:

            var canProceed;
            confirmationService.popConfirm().then(function(confirmed){
                canProceed = true;
            }, function(){
            // something went wrong
                canProceed = false;
            });


文章来源: AngularJS validation and promises