How do I pass data back from modal's controller on close?

[sudhirjena]

I have a MainController that has list of customers called vm.customers

MainController

(function() {
'use strict';

    angular
        .module('app')
        .controller('MainController', MainController);

    MainController.inject = ['$scope', '$q', 'dataservice', 'logger', '$ocModal', 'CUSTOMERS'];
    function MainController($scope, $q, dataservice, logger, $ocModal, CUSTOMERS) {
        var vm = this;
        vm.customers = [];

        vm.populateCustomers = populateCustomers;
        vm.openAddCustomerModal = openAddCustomerModal;

        activate();

        ////////////////

        function activate() {
            var promises = [populateCustomers()];
            return $q.all(promises)
                .then(function () {
                    logger.info('Activated Customer List View');
                    return vm;
                });
        }

        function populateCustomers() {
            // CUSTOMERS is just an angular constant

            if (!vm.customers.length) {
                vm.customers = _.chain(CUSTOMERS).sortBy('name').value();
            }
            return vm.customers;
        }

        function openAddCustomerModal() {
            $ocModal.open({
                url: 'js/app/customer-add.html',
                controller: 'CustomerAddController',
                closeOnEsc: false,
                init: {
                    customer: {}
                }
            });
        }
    }
})();

The MainController uses $ocModal to open up an add new customer modal which is an input form with SAVE and CANCEL buttons.

The SAVE action calls dataservice.createCustomer($scope.customer) followed by $ocModal.close();

CustomerAddController

(function() {
'use strict';

    angular
        .module('app')
        .controller('CustomerAddController', CustomerAddController);

    CustomerAddController.inject = ['$scope', '$q', 'dataservice', 'logger', '$ocModal'];
    function CustomerAddController($scope, $q, dataservice, logger, $ocModal) {
        $scope.addCustomer = addCustomer;

        activate();

        ////////////////

        function activate() { 
            logger.info('Add Customer Modal Open');
        }

        function addCustomer() {
            return dataservice.createCustomer($scope.customer)
                .then(function (newCustomer) { 
                    $ocModal.close();
                })
                .catch(function () {
                    $ocModal.close();
                });
        }
    }
})();

How do I pass newCustomer back to MainController on $ocModal.close so that a function in MainController like shown below can push the received newCustomer to vm.customers?

...
        vm.addNewCustomer = addNewCustomer;
...

        function addNewCustomer(newCustomer) {
                vm.customers.push(newCustomer);
        }

[ocombe]

Hello,

you can pass arguments to the close method: $ocModal.close(newCustomer);. And then in your main controller that opens the modal you can use the onClose callback:

function openAddCustomerModal() {
    $ocModal.open({
        url: 'js/app/customer-add.html',
        controller: 'CustomerAddController',
        closeOnEsc: false,
        init: {
            customer: {}
        },
        onClose: function(newCustomer) {

        }
    });
}

You can pass as many arguments as you wish to the close method, they will be passed to the onClose callback.

[sudhirjena]

Thanks for your quick help @ocombe ...

One more question related to your answer - Can i use vm.addNewCustomer(newCustomer) instead of an anonymous function function(newCustomer)?

function openAddCustomerModal() {
    $ocModal.open({
        url: 'js/app/customer-add.html',
        controller: 'CustomerAddController',
        closeOnEsc: false,
        init: {
            customer: {}
        },
        onClose: vm.addNewCustomer
    });
}

[ocombe]

Absolutely :)