在导航时自动关闭模式（单击锚点时）

Question

我在我的 web 应用程序中使用 angular-ui 模态。其中一个模型显示了许多链接（锚元素），这些链接可以导航到应用程序的各个部分。模态可以像往常一样使用 modal.dismiss() 或 modal.close() 关闭。但是当有人通过单击锚点导航离开它时，我需要它关闭吗？通常（不是角度）我可以将一个事件附加到所有锚点击并从那里关闭模式。但是在角度上，它似乎有些复杂，而且不是很“有棱角”-关于如何实现这一点的任何想法/方向？

例如：我正在使用 angular-ui-router 所以如果这可以通过路由解决它也可以解决我的问题。

谢谢！

Answer 1

Angular-ui-router 会在发生状态更改时触发事件，因此在您的控制器中您可以执行以下操作：

$scope.currentModal = undefined;

// whenever a modal opens, ensure it is assigned to the $scope.currentModal. Not clear how
// you are managing your modals at the moment.

// this event-listener closes the current modal (if any)
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
  if ($scope.currentModal) {
    $scope.currentModal.dismiss();
  }
})

Answer 2

当状态改变时，使用 $modalStack.dismissAll() 关闭任何 modalbox。

angular.module('myApp').controller('AppCtrl', ['$scope', '$rootScope', '$modal', '$modalStack',
    function ($scope, $rootScope, $modal, $modalStack) {

        $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options){
            $modalStack.dismissAll();
        });

    }
]);