javascript - Passing multiple parameters UI Bootstrap Modal Window Angular JS not working - Stack Overflow

admin管理员组

文章数量:1420639

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 bees 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?

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 bees 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?

• javascript
• angularjs
• angular-ui-bootstrap

Share Improve this question Follow asked Sep 11, 2015 at 16:26 Tom O'BrienTom O'Brien 1,84199 gold badges4747 silver badges7676 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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

本文标签： javascriptPassing multiple parameters UI Bootstrap Modal Window Angular JS not workingStack Overflow