有没有办法在路线更改时自动关闭Angular UI Bootstrap模式？

Question

我在模态中的模板中有链接.当我单击它们时,当前页面会发生变化,但叠加层和模态会保持不变.我可以添加ng-click="dimiss()"模态中所有模板中的每个链接,但有更好的方法吗？例如,在成功路由更改时自动关闭它,或者ng-click每个模板只添加一个来处理所有链接？

Answer 1

如果您希望在路线成功更改时关闭所有打开的模态,您可以通过收听$routeChangeSuccess事件在一个中心位置执行此操作,例如在应用程序的运行块中:

var myApp = angular.module('app', []).run(function($rootScope, $uibModalStack) {
  $uibModalStack.dismissAll();
}); 

在这里你可以看到$uibModalStack服务被注入,你可以调用该dismissAll方法 - 这个调用将关闭所有当前打开的模态.

所以,是的,你可以在一个地方集中处理模态,只需一行代码:-)

Answer 2

更好的方法是看到每当打开Popup(模态)时,在浏览器返回按钮单击(或键盘后退)上,我们停止URL更改并关闭弹出窗口.这有助于在我的项目中获得更好的用户体验.

如果没有打开模态,则"浏览器后退"按钮可正常工作.

使用:

$uibModalStack.dismiss(openedModal.key);

要么

$uibModalStack.dismissAll;

示例代码:

.run(['$rootScope', '$uibModalStack',
    function ($rootScope,  $uibModalStack) {       
        // close the opened modal on location change.
        $rootScope.$on('$locationChangeStart', function ($event) {
            var openedModal = $uibModalStack.getTop();
            if (openedModal) {
                if (!!$event.preventDefault) {
                    $event.preventDefault();
                }
                if (!!$event.stopPropagation) {
                    $event.stopPropagation();
                }
                $uibModalStack.dismiss(openedModal.key);
            }
        });
    }]);