$ modal ui-router命中逃脱改变状态

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.

我想让我的webapp回到当用户遇到逃脱或点击popop时所处的状态。现在它只在用户点击触发$ scope.close函数的okay按钮时才有效。

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

所以现在他们点击弹出窗口之前的url是myendpoint / rates / rate。然后,当他们点击弹出窗口时,它会打开,网址是myendpoint / rates / rate / runexperiment。然后当他们逃脱或点击弹出窗口时,窗口就会消失,但状态仍然是myendpoint / rates / rate / runexperiment。它在用户单击“okay”按钮并且返回到myendpoint / rates时起作用。

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

我已经尝试了.state中的onExit功能,但没有让它工作。任何建议?

1 个解决方案

#1

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

您可以使用模态承诺在单击背景或按下esc时捕获事件。

   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.

//或者只是使用finally来重定向whenevr模态关闭。

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

and remove state.go from close function.

并从close函数中删除state.go。

#1