退出 $state 时关闭 $uibModal答案

【问题标题】：Closing $uibModal On Exiting the $state退出 $state 时关闭 $uibModal
【发布时间】：2017-11-03 16:28:03
【问题描述】：

我在我的 angularjs 应用程序中使用 ui-router 进行路由，为 UI 使用 ui-bootstrap。在我的应用程序中进入状态时，我正在打开一个 uibmodal，它基本上返回一个 uibmodalinstance，但是当我使用

更改状态时

$state.go('dashboard')

在我的控制器内部，它正在改变状态，但没有关闭模式。所以我希望模态在退出状态时关闭。我已经编写了以下代码，但某些部分代码不起作用。请参阅编码和不工作部分的 cmets

    $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();
                }]
            });

我的控制器编码如下：-

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

任何人请告诉我在更改状态时关闭 uibmodal 的解决方案

【问题讨论】：

标签： javascript angularjs angular-ui-router angular-ui-bootstrap angularjs-routing

【解决方案1】：

我通过在我的 app.run 中添加 $uibModalStack.close() 解决了这个问题

function run($uibModalStack) {
   $rootScope.$on('$stateChangeStart', function() {
       $uibModalStack.dismissAll();
   });
}

【讨论】：

【解决方案2】：

您可以参与一些$stateProvider 事件。

我在我的一个应用程序中做了类似的事情（在咖啡脚本中，但你明白了）

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

基本上，在你处理模态的控制器中，你会观察$stateChangeStart事件，当你捕捉到它时，你可以关闭模态。

参见https://github.com/angular-ui/ui-router/wiki，特别是关于状态变化事件的部分

---编辑---

我刚刚注意到这些调用已被弃用。如果您使用的是UI-Router > 1.0，这里有一些关于如何迁移的文档：https://ui-router.github.io/guide/ng1/migrate-to-1_0#state-change-events

【讨论】：

我发现它使用 rootscope 而不是 scope.thanks for answere