I have an angularjs app. I added a button to my app and when a user clicks on it , a pop up screen is displayed. The user should choose from 2 drop down lists so i have two values that i need to send back to my service who opened the modal screen.

The service that opens the pop up screen

app.service('OriginalService', [ '$modal',
function ($modal) {

this.openDialog = function(){
        var modalInstance = $modal.open({
            templateUrl: 'ModalScreen.html',
            controller: 'ModalController'
        });

        modalInstance.result.then(function (oneFilter, secondFilter) {
            this.filtersMananger.oneFilter= oneFilter;
            this.filtersMananger.secondFilter= secondFilter;
        }, function () {

        });
    };
}]);

In the ModalController when i click OK i sent the two values:

app.controller('ModalController', ['$scope', '$modalInstance',
                                     function ($scope, $modalInstance) {

$scope.ok = function () {
        $modalInstance.close($scope.filterMananger.oneFilter, 
                             $scope.filterMananger.secondFilter);
    };
}]);

The problem is that only the first value is return to the service. I saw in other examples and maybe in angular they expected to one result only:

modalInstance.result.then(function (result)

Can i send two or values as a result or must i send an object with the two values only in this case?

I have an angularjs app. I added a button to my app and when a user clicks on it , a pop up screen is displayed. The user should choose from 2 drop down lists so i have two values that i need to send back to my service who opened the modal screen.

The service that opens the pop up screen

app.service('OriginalService', [ '$modal',
function ($modal) {

this.openDialog = function(){
        var modalInstance = $modal.open({
            templateUrl: 'ModalScreen.html',
            controller: 'ModalController'
        });

        modalInstance.result.then(function (oneFilter, secondFilter) {
            this.filtersMananger.oneFilter= oneFilter;
            this.filtersMananger.secondFilter= secondFilter;
        }, function () {

        });
    };
}]);

In the ModalController when i click OK i sent the two values:

app.controller('ModalController', ['$scope', '$modalInstance',
                                     function ($scope, $modalInstance) {

$scope.ok = function () {
        $modalInstance.close($scope.filterMananger.oneFilter, 
                             $scope.filterMananger.secondFilter);
    };
}]);

The problem is that only the first value is return to the service. I saw in other examples and maybe in angular they expected to one result only:

modalInstance.result.then(function (result)

Can i send two or values as a result or must i send an object with the two values only in this case?

• javascript
• angularjs
• modal-dialog

2 Answers 2

If you take a look at $modal source code you will see this lines:

var modalInstance = {
    result: modalResultDeferred.promise,
    opened: modalOpenedDeferred.promise,
    close: function(result) {
        $modalStack.close(modalInstance, result);
    },
    dismiss: function(reason) {
        $modalStack.dismiss(modalInstance, reason);
    }
};

From which it's clear, that close and dismiss methods accept only one result parameter. So you have to pass and object or array if you want to pass several.

Can i send two or values as a result

Unless you implement some other way for the modal to communicate with the calling code (which I suspect would be needlessly complicated), you can only send one value.

This is because the value passed to close ends up being the resolved value of the modalInstance.result promise. Promises only have one resolved value. But as you have noted, you can send an object, so this single value can be a wrapper for multiple.