Returning data from angular $uibModal backdrop click

Question

I'm trying to pass back a value from a uibModal. I can define the return if the user clicks the modal's close button

$scope.close = function () {
    $modalInstance.close($scope.editMade);
};

But this doesn't work if the user click the backdrop area.

How can I define a return value for that particular event?

Answer 1

When you click on the backdrop outside, it does a dismiss internally.

Try using this inside modal:

$modalInstance.dismiss($scope.editMade);

And use this to handle data:

 instance.result.then(function(){
  //Get triggers when modal is closed
 }, function(){
  //gets triggers when modal is dismissed. You can basically handle data here
 });

Check this working plunker. It uses the dismiss as I mentioned

http://embed.plnkr.co/YdWmqYPFBNbv4vhQZc4t/

Passing custom data to your parent controller when modal is dismissed:

Code in Modal Controller:

  $scope.$on("modal.closing",function(){
       $rootScope.$broadcast("modalClosing",$scope.editMade);
  });

Then in your parent controller:

 $scope.$on("modalClosing",function(event,value){
    console.log(value); //value should be $scope.editMade
  });

You can learn more by reading the documentation here: https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs

Answer 2

In the modal controller, you can do something like this:

$scope.$on('modal.closing', function(event, reason, closed) {
                if (reason == "backdrop click" || reason == "escape key press")
                {
                    event.preventDefault();
                    $uibModalInstance.close({"data": somedata});
                }                
            });

This way you'll always get the success callback on modalInstance

modalInstance.result.then(function(response) {
// here response will be whatever is passed. in this sample {"data": somedata}
});