Tom O'Brien Tom O'Brien - 9 days ago 6
Javascript Question

Passing multiple parameters UI Bootstrap Modal Window Angular JS not working

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

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