如何在AngularJS中将Modals作为服务处理响应

Question

I am new to JavaScript and AngularJS. There are couple things with JS that astounds me. For example I am trying to create a modal service and I found teh following example online. I wish to understand what is happening internally in the specific line where the modal is opened.

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

In the Line :

 var modalInstance = $modal.open({

What I understand is the the open method is called in the $modal service with a bunch of configurations set up.

No within the controller I have my cartObj that is sent by the consuming view which I will then use to make certain CRUD operations.

My question is : I want the consuming view to know if there was a success or a failure of teh crud operation and also to return the data. How can I implement this with a call back at the consuming view? This is getting confusing because the "Submit" logic is within the Modals's controller. 1. When I return something from here, I am unable to access it on the consuming end. How do return from within submit call? 2. How do I handle success and error based on this setup? Do I handle success and failure at modal service and return just data? Or is there a way I can do it gracefully at consuming end, like:

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

Answer 1

As per your code, you are using AngularUI So, I will just complete your code, which is a way to solve your problem

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

first of all use $uibModalInstance instead modalInstance. Read this

Now what I have done is binded modalInstance with the "result" method provided by $modal.open(), which eventually returns a Promise, So now you can resolve the promise like this

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

Hope it helps.

Answer 2

I figured out an old school way to approach this issue. I did not have to use promise at all. From the consumer end I just return two functions in params like so at the consuming end :

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

in the modal service, the signature changes as follows:

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

Now I will just call successFunc or errorFunc call backs when I need to based on whether the DB call was a success or not and pass the data or error message respectively in the function's param. Like:

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

  };

Hope this helps someone in this kind of use case.