How to Return Asynchronous ($http) Data on Modal Close or Cancel

Question

I have a open modal in controller called "Audit"

 $scope.comment = function (spec){
         ManualService.setManual(spec);
            var modalInstance = $modal.open({
                templateUrl: 'views/comment.html',
                controller: 'CommentCtrl',
                size: 'lg'
            });
     }

When the users clicks on comment button the modal opens and user can add comments. On closing the comment modal i'm trying to update the modal in "Audit" controller but it's not happening

Below function is in a different controller called "Comments"

$scope.cancel = function () {

        $http.post('/api/v1/manual/manual',$scope.id).success (function (data) {
            $scope.manual = data;
            ManualService.setManual($scope.manual);
        }).error(function (data, status) {
            console.log('Error ' + data);
        });


        $modalInstance.dismiss('cancel');
    };

My question is how do I return the new data I got from calling the endpoint on cancel function without reloading the page

score 1 · Answer 1 · answered Mar 15 '17 at 20:35

The $modal.open() function returns a few things, and you're looking for the result property. Here's the documentation, take a look at the result property.

The result property returns a promise that you can chain on in order to do certain things when the modal is either "closed" or "dismissed".

When closing a modal, you have two options:

$modalInstance.close(value)
$modalInstance.dismiss(value)

You can use either one, but I'd suggest using the close() function for "successful" completion, and dismiss() for "cancelled" or "failed" modal operations. Typically the "x" button in the top right of the modal will call the dismiss() function, so you can handle dismissal separately from completion.

So, you'll end up with something like this:

$modal.open({}).result.then(
    function (value) {
        // Use the value you passed from the $modalInstance.close() call
    },
    function (dismissed) {
        // Use the value you passed from the $modalInstance.dismiss() call
    }
)

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Return the promise returned by the $http service:

$scope.cancel = function () {

    var promise = $http.post('/api/v1/manual/manual',$scope.id)
      .then (function (response) {
        var manual = response.data;
        return manual;
    });

    $modalInstance.dismiss(promise);
};

Then chain from the result:

$modal.open({}).result.then(
    function onClose(value) {
        // Use the value you passed from the $modalInstance.close() call
    },
    function onCancel(manual) {
        ManualService.setManual(manual);
        $scope.manual = manual;
    }
)

The $modal service creates a $scope that is destroyed when the modal closes. Use the promise returned by the modal service to update the proper $scope.

Because calling the .then method of a promise returns a new derived promise, it is easily possible to create a chain of promises.

It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs.

— AngularJS $q Service API Reference - Chaining Promises

See also UI Bootstrap Modal DEMO and API Reference

How to Return Asynchronous ($http) Data on Modal Close or Cancel

2 Answers2