Javascript 如何在AngularJS中将模态作为服务处理响应

我不熟悉JavaScript和AngularJS。JS有几件事让我吃惊。例如，我试图创建一个模式服务，我在网上发现了以下示例。我希望了解打开模式的特定行内部发生的情况

        $scope.checkout = function (cartObj) {
      var modalInstance = $modal.open({
      templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',
      controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
                        $scope.submit = function () {
                            console.log("Submit");
                            //DB CALL HERE (with promise)
                            return "well";

                        };
                        $scope.cancel = function () {
                            console.log("Cancel");
                            $modalInstance.dismiss('cancel');
                            return "not so well";
                        };
      }],
      resolve : { // This fires up before controller loads and templates rendered
        cartObj : function() {
           return cartObj;
        }
      }
    });

行中：

 var modalInstance = $modal.open({

据我所知，open方法是在$modal服务中调用的，并设置了一系列配置

控制器中没有我的cartObj，它由消费视图发送，然后我将使用它进行某些CRUD操作

我的问题是: 我希望消费视图知道crud操作是否成功，并返回数据。我如何在消费视图中通过回调来实现这一点？这让人感到困惑，因为“提交”逻辑在Modals的控制器中。 1.当我从这里返回某物时，我无法在消费端访问它。如何从submit call中返回？ 2.如何基于此设置处理成功和错误？我是否在模式服务中处理成功和失败并仅返回数据？或者有没有一种方法可以让我在消费端优雅地做到这一点，比如：

modalService.checkout(cartObj).success(function(response){
      //success handler
  }).error(function(response)){
      //failure handler
  }

---

根据您的代码，您正在使用AngularUI 所以，我将完成您的代码，这是解决您的问题的一种方法

$scope.checkout = function(cartObj) {
  var modalInstance = $modal.open({
    templateUrl: 'assets/menu/directives/payment-processing-modal.tmpl.html',
    controller: ["$scope", "$uibModalInstance", "cartObj", function($scope, $uibModalInstance, cartObj) {
      $scope.submit = function() {
        console.log("Submit");
        //DB CALL HERE (with promise)
        DB_CALL.then(function(success) {
          // It resolve and pass to success fuction of the result promise
          $uibModalInstance.close({ success: success });
        }, function(err) {
          // It rejects the result promise
          $uibModalInstance.dismiss({ error: err });
        });
        return "well";

      };
      $scope.cancel = function() {
        console.log("Cancel");
        // It rejects the result promise
        $uibModalInstance.dismiss({ error: 'cancel' });
        return "not so well";
      };
    }],
    resolve: { // This fires up before controller loads and templates rendered
      cartObj: function() {
        return cartObj;
      }
    }
  }).result;
}

首先，使用$uibModalInstance代替modalInstance。阅读

现在我所做的是使用$modal.open（）提供的“result”方法绑定modalInstance，该方法最终返回一个承诺， 所以现在你可以像这样解决承诺了

modalIntance.then(function(success) {
      /* Your success code goes here*/
    }, function(err) {
      /* Your failure code goes here*/
    });

---

希望有帮助。

根据您的代码，您正在使用AngularUI 所以，我将完成您的代码，这是解决您的问题的一种方法

$scope.checkout = function(cartObj) {
  var modalInstance = $modal.open({
    templateUrl: 'assets/menu/directives/payment-processing-modal.tmpl.html',
    controller: ["$scope", "$uibModalInstance", "cartObj", function($scope, $uibModalInstance, cartObj) {
      $scope.submit = function() {
        console.log("Submit");
        //DB CALL HERE (with promise)
        DB_CALL.then(function(success) {
          // It resolve and pass to success fuction of the result promise
          $uibModalInstance.close({ success: success });
        }, function(err) {
          // It rejects the result promise
          $uibModalInstance.dismiss({ error: err });
        });
        return "well";

      };
      $scope.cancel = function() {
        console.log("Cancel");
        // It rejects the result promise
        $uibModalInstance.dismiss({ error: 'cancel' });
        return "not so well";
      };
    }],
    resolve: { // This fires up before controller loads and templates rendered
      cartObj: function() {
        return cartObj;
      }
    }
  }).result;
}

首先，使用$uibModalInstance代替modalInstance。阅读

现在我所做的是使用$modal.open（）提供的“result”方法绑定modalInstance，该方法最终返回一个承诺， 所以现在你可以像这样解决承诺了

modalIntance.then(function(success) {
      /* Your success code goes here*/
    }, function(err) {
      /* Your failure code goes here*/
    });

---

希望能有所帮助。

我想出了一个老派的方法来解决这个问题。我根本不需要使用承诺。从使用者端，我只返回两个参数中的函数，就像在使用者端一样：

service.method(param, function(result){
      //success handler
     }, function(err){
      //error handler
     });

在模式服务中，签名更改如下：

service.method(params, succesFunc, errorFunc){
   //modal code
   }

现在，我将根据DB调用是否成功，在需要时调用successFunc或errorFunc回调，并分别在函数的参数中传递数据或错误消息。比如：

 $scope.submit = function() {
    console.log("Submit");
    //DB CALL HERE (with promise)
    DB_CALL.then(function(success) {
      // It resolve and pass to success fuction of the result promise
      successFunc(success);
    }, function(err) {
      // It rejects the result promise
      errorFunc(err);
    });
    return "well";

  };

---

希望这对这种用例中的某人有所帮助

我想出了一个老派的方法来解决这个问题。我根本不需要使用承诺。从使用者端，我只返回两个参数中的函数，就像在使用者端一样：

service.method(param, function(result){
      //success handler
     }, function(err){
      //error handler
     });

在模式服务中，签名更改如下：

service.method(params, succesFunc, errorFunc){
   //modal code
   }

现在，我将根据DB调用是否成功，在需要时调用successFunc或errorFunc回调，并分别在函数的参数中传递数据或错误消息。比如：

 $scope.submit = function() {
    console.log("Submit");
    //DB CALL HERE (with promise)
    DB_CALL.then(function(success) {
      // It resolve and pass to success fuction of the result promise
      successFunc(success);
    }, function(err) {
      // It rejects the result promise
      errorFunc(err);
    });
    return "well";

  };

---

希望这对这种用例中的某人有所帮助

谢谢你的意见，尼利斯。虽然我认为您在这里提到的成功和失败案例，但回调会在服务中触发。我需要从服务的消费者那里得到它，他们仍然无法识别成功和失败回调，我怀疑，从模态控制器代码中返回的承诺不知何故没有在消费者端被捕获。另外，我使用的AngularUI版本仍然没有使用uib服务。谢谢你的输入，Nilesh。虽然我认为您在这里提到的成功和失败案例，但回调会在服务中触发。我需要从服务的消费者那里得到它，他们仍然无法识别成功和失败回调，我怀疑，从模态控制器代码中返回的承诺不知何故没有在消费者端被捕获。另外，我使用的AngularUI版本仍然没有使用uib服务。