Passing multiple parameters UI Bootstrap Modal Window Angular JS not working

Question

I am trying to pass 4 variables into and out of a modal window, using AngularJS and UI Bootstrap. Unfortunately when I get the parameters back from the modal window, only 1 of the parameters shows up - all the rest return as 'undefined'!

To the code:

Here is where I open the $modal service, and pass the 4 parameters:

$scope.open = function() {

    var modalInstance = $modal.open({
        templateUrl: 'modal.html',
        controller: 'ModalController',
        resolve: {
            var1: function() { return $scope.var1; },
            var2: function() { return $scope.var2; },
            var3: function() { return $scope.var3; },
            var4: function() { return $scope.var4; }
        }
    });

These are injected to the ModalController like so:

var ModalController = function($scope, $modalInstance, var1, var2, var3, var4) {

Inside the ModalController, I can see and use these variables just fine.

I then return them to the parent Controller by closing the modal window like this:

var ok = function() {
    $modalInstance.close($scope.var1, $scope.var2, $scope.var3, $scope.var4);
};

The problem becomes clear when these values are received back in the parent controller - it only seems to pass the first parameter, var1. All the others are undefined!

modalInstance.result.then(function (var1, var2, var3, var4) {
    $scope.var1 = var1;
    $scope.var2 = var2;
    $scope.var3 = var3;
    $scope.var4 = var4;
}, function () {
    console.log("Modal dismissed at: " + new Date());
});         

Now, I see in the UI Bootstrap documentation that the "close" function expects a promise. I'm pretty new to Angular and Javascript and don't really understand why 1 variable works, and not multiple? I assume I have structured things incorrectly... I don't really understand how the resolve stuff works, so I am sure I am doing something pretty stupid.

Any ideas?

Answer 1

return one JSON object, like:

$modalInstance.close({'var1':$scope.var1, 'var2':$scope.var2, 'var3':$scope.var3, 'var4':$scope.var4});

and

modalInstance.result.then(function (result) {
  console.log(result);
  $scope.var1 = result.var1;
      .....
}

Answer 2

If you look at the signature for .then(), you'll notice that it doesn't send through an unknown number of arguments but rather very specific parameters. The first argument is your data. As such, send an object representing all of your data rather than breaking it apart.

var ok = function() {
    var data = {
        var1: $scope.var1, 
        var2: $scope.var2, 
        var3: $scope.var3, 
        var4: $scope.var4
    };
    $modalInstance.close(data);
};

modalInstance.result.then(function (data) {
    $scope.var1 = data.var1;
    $scope.var2 = data.var2;
    $scope.var3 = data.var3;
    $scope.var4 = data.var4;
}, function () {
    console.log("Modal dismissed at: " + new Date());
});