javascript - AngularJS 验证和 promise

Question

在 Angular 应用程序中，表单在提交之前通过自定义 JS 函数进行验证。根据条件，我需要向用户显示一个确认对话框，等待确认或拒绝，然后继续进行验证。我很难异步实现这一点。我相信我没有正确使用 promise ，但不确定需要更新什么。

工厂

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

Controller

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

显示确认对话框，但在对话框中单击"is"或“否”不会产生预期的结果。

我想做的是根据用户是确认还是关闭对话框获取真/假值，按照

var canProceed = $scope.checkSomething();

我想我需要将其封装到另一个 promise 中，但不确定如何。任何帮助将不胜感激。

谢谢，

Answer 1

因为 openConfirm 已经返回一个 Promise，你不需要再用 $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);
    }
}

请注意它不再返回 true 或 false，而是返回一个 promise 对象。最后你应该使用 $scope.checkSomething() 就像异步操作一样:

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

总而言之，理解 checkSomething 应该返回一个 promise 而不仅仅是 true/false 是最重要的事情。