CODEWITHSUNDEEP
angularjsangular-ui-bootstrapangular-ui-router
Garuuk
Garuuk

Reputation: 2254

$modal ui-router hitting escape changing state

I want to make my webapp go back to the state it was in when a user hits escape or clicks out of the popop. Right now it only works when a user clicks the okay button which triggers the $scope.close function.

.state('rates.rate.runexperiment', {
    url: "/runexperiment",
    onEnter: ['$stateParams', '$state', '$modal', function($stateParams, $state, $modal){
        $modal.open({
            templateUrl: "templates/ExpsResults.html",
            controller: ['$scope', 'ExpsService', function($scope, ExpsService) {

                $scope.expResults = null;

                $scope.getExpResults = function(){
                    ExpsService.getExpResults('1000').get().then(function(response){
                        $scope.expResults = response;
                    });
                };

                $scope.close = function() {
                    $scope.$close(true);
                    $state.go('rates.rate');
                };

                $scope.getExpResults();
            }]
        })
    }]
})

so right now the url before they click on the pop up is myendpoint/rates/rate. Then when they click on the pop it opens up and the url is myendpoint/rates/rate/runexperiment. Then when they escape or click out the popup, the window disappears like it should but the state is still myendpoint/rates/rate/runexperiment. It works when the user clicks the okay button and it goes back to myendpoint/rates.

I've tried the onExit feature in the .state but didn't get it to work. Any advice?

Upvotes: 1

Views: 1007

Answers (1)

PSL
PSL

Reputation: 123739

You could use the modal promise to capture the event when backdrop is clicked or when esc is pressed.

   var modalInst = $modal.open({
        templateUrl: "templates/ExpsResults.html",
        controller: ['$scope', 'ExpsService', function($scope, ExpsService) {

            $scope.expResults = null;

            $scope.getExpResults = function(){
                ExpsService.getExpResults('1000').get().then(function(response){
                    $scope.expResults = response;
                });
            };

            $scope.close = function() {
                $scope.$close(true);
                $state.go('rates.rate');
            };

            $scope.getExpResults();
        }]
    })


    modalInst.result.then(function () {

    }, function () {//This will be triggered on dismiss/Esc/backdrop click
       $state.go('rates.rate');
    });

// Or just use finally to redirect whenevr modal is closed.

    modalInst.result.finally(function () { // or .result[finally](
        //Will be triggered always.
        $state.go('rates.rate'); 
    });

and remove state.go from close function.

Upvotes: 2

Related Questions