Closing $uibModal On Exiting the $state

Question

I am using ui-router for routing in my angularjs app and ui-bootstrap for UI.In my app on entering a state i am opening a uibmodal which basically returns a uibmodalinstance but when i change a state using

$state.go('dashboard')

Inside my controller it is changing the state but didn't closing modal. So i want modal to be closed on exiting the state. i Have written following code but some part of code doesn't work. please see coding and the comments for not working part

    $stateProvider.state('makeabid',{
                parent: 'dashboard',
                url: '/makeabid/{id}',
                data: {
                    authorities: ['ROLE_USER'],
                    pageTitle: 'global.menu.makeabid'
                },
                onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
                    $uibModal.open({
                        templateUrl: 'app/dashboard/makeabid/makeabid.html',
                        controller: 'MakeabidController',
                        controllerAs: 'vm',
                        backdrop: true,
                        size: 'lg'
                    }).result.then(function () {
                        $state.go('dashboard');
                    });
                }]
//this part doesnt work             
,onExit:['$uibModalInstance','$stateParams', '$state',function ($uibModalInstance,$stateParams, $state) {
                    $uibModalInstance.close();
                }]
            });

My Controller Coding is as follows : -

MakeabidController.$inject = ['$stateParams','$state','$uibModalInstance','MakeabidService'];

    function MakeabidController( $stateParams, $state, $uibModalInstance, MakeabidService) {
        var vm = this;
        loadAll();
        vm.clear = clear;
        vm.save = save;

        function clear () {
            $uibModalInstance.close();
        }

        function save() {
            // console.log(vm.comparableData);
        }

        function loadAll() {
            vm.comparableData = MakeabidService.getobject();
            if(angular.isUndefined(vm.comparableData)){
//$uibModalInstance.close(); //It doesn't work
                    $state.go('dashboard'); //This is working 
                }
            }
        }

AnyOne Please Tell me solution for closing the uibmodal on changing state

Answer 1

You can tap into to some of the $stateProvider events.

I do something similar in one of my apps (in coffeescript, but you get the idea)

@$scope.$on '$stateChangeStart', (e, to, top, from, fromp) =>
  @$uibModalInstance.close()

Basically, in your controller that handles the modal, you will watch for the $stateChangeStart event, and when you catch it, you can close the modal.

See https://github.com/angular-ui/ui-router/wiki, specifically the section on State Change Events

---EDIT---

I just noticed that these calls are deprecated. If you are using UI-Router > 1.0, there is some documentation here on how to migrate: https://ui-router.github.io/guide/ng1/migrate-to-1_0#state-change-events