有没有一种方法可以在路径改变时自动关闭角度UI引导模式?

I've got links in templates inside modals. When I click them, the current page changes, but the overlay and modal stay. I could add ng-click="dimiss()" to every link in all templates in modals, but is there a better way? E.g. to close it automatically on successful route change or add just one ng-click per template to handle all links?

我在modals中有模板中的链接。当我点击它们时，当前页面改变了，但是覆盖和模式保持不变。我可以将ng-click="dimiss()"添加到modals中所有模板中的每个链接中，但是有更好的方法吗?例如，要在成功的路由更改上自动关闭它，或者只添加一个ng-click每个模板来处理所有链接?

6 个解决方案

#1

If you want all the opened modals to be closed whenever a route is changed successfully, you could do it in one central place by listening to the $routeChangeSuccess event, for example in a run block of your app:

如果您希望在路由成功更改时关闭所有打开的modals，您可以通过监听$routeChangeSuccess事件，例如在您的应用程序的运行块中:

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

Here you can see that the $uibModalStack service gets injected on which you can call the dismissAll method - this call will close all the currently opened modals.

在这里，您可以看到注入了$uibModalStack服务，您可以在该服务上调用dismissAll方法——该调用将关闭当前打开的所有modals。

So, yes, you can handle modals closing centrally, in one place, with one line of code :-)

所以，是的，你可以处理modals集中关闭，在一个地方，用一行代码:-)

#2

A better way is to see that whenever a Popup (Modal) is open, on Browser Back button click (or Keyboard Back), we stop the URL change and just close the Popup. This works for a better User Experience in my Project.

更好的方法是，当弹出窗口(模态)打开时，在浏览器后退按钮单击(或键盘后退)时，我们停止URL更改并关闭弹出窗口。这对我的项目有更好的用户体验。

The Browser Back button works normally if there is no Modal opened.

如果没有打开模式，浏览器后退按钮正常工作。

use:

使用:

$uibModalStack.dismiss(openedModal.key);

或

$uibModalStack.dismissAll;

Sample code:

示例代码:

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

#3

I don't actually use Angular UI Bootstrap, but from looking at the docs, it looks like there is a close() method on the $modalInstance object.

我实际上不使用角UI引导，但是从文档中可以看出，在$modalInstance对象上似乎有一个close()方法。

So taking the example from the docs, this should work:

因此，以文档为例，这应该是可行的:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
    $scope.items = items;
    $scope.selected = {
        item: $scope.items[0]
    };
    $scope.ok = function () {
        $modalInstance.close($scope.selected.item);
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

    // this will listen for route changes and call the callback
    $scope.$on('$routeChangeStart', function(){
        $modalInstance.close();
    });
};

Hope that helps.

希望有帮助。

#4

I resolved this issue by doing something like this:

我通过这样做来解决这个问题:

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

#5

I am keeping this logic in the modal controller. You can listen to $locationChangeStart event and close modal there. It is also good to remove listener after, especially if you have registered a listener on $rootScope:

我把这个逻辑保存在模态控制器中。您可以在那里监听$locationChangeStart事件并关闭模式。在之后删除侦听器也很好，特别是如果您在$rootScope上注册了一个侦听器:

angular.module('MainApp').controller('ModalCtrl',['$scope','$uibModalInstance',
function ($scope, $uibModalInstance) {

  var dismissModalListener = $scope.$on('$locationChangeStart', function () {
    $uibModalInstance.close();
  });

  $scope.$on('$destroy', function() {
    dismissModalListener();
  });

}]);

#6

check for the respective route condition in the event $stateChangeSuccess and then close the open bootstrap modals globally using the class like this:

在事件$stateChangeSuccess中检查各自的路由条件，然后在全局上使用如下的类关闭打开的bootstrap modals:

$rootScope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){
//hide any open bootstrap modals
  angular.element('.inmodal').hide();
});

If you want to hide any other modals such as angular material dialog ($mdDialog) & sweet alert dialog's use angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();

如果你想要隐藏任何其他的模式，比如角材质对话框($mdDialog)和sweet alert对话框的使用angular.element('.modal-dialog').hide();& angular.element(.sweet-alert)hide();

#1