Question

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

Answer 1

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

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

Answer 3

我实际上并没有使用Angular UI Bootstrap，但是通过查看docs，看起来close()对象上有$modalInstance方法。

所以以docs为例，这应该有效：

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

希望有所帮助。

Answer 4

我通过这样的方式解决了这个问题：

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

Answer 5

我将这个逻辑保留在模态控制器中。您可以在那里收听$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();
  });

}]);

Answer 6

检查事件$stateChangeSuccess和中的相应路线条件然后使用如下所示的类全局关闭open bootstrap模式：

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

如果要隐藏任何其他模态，例如角度材质对话框（$mdDialog）＆amp;甜蜜警报对话框的使用angular.element('.modal-dialog').hide();＆amp; angular.element('.sweet-alert').hide();

Answer 7

添加此替代答案。

根据您的项目，使用$uibModalStack.dismissAll()可能会触发错误消息。

如JB Nizet的答案this所述，这是由于dismissAll()拒绝了诺言而导致的是“失败”回调，而不是由{触发的“成功”回调{1}}。

所说的承诺拒绝可能会触发可能不需要的错误处理过程。

鉴于close()中没有closeAll()，我用了这个：

$uibModalStack

这与var modal = $uibModalStack.getTop(); while (modal && this.close(modal.key)) { modal = this.getTop(); }相同，但使用的是$uibModalStack.dismissAll()而不是.close()。

我找不到任何描述.dismiss()的公共方法的文档，因此，如果有人有兴趣使用/查看$uibModalStack上可用的其他方法。

它可能位于$uibModalStack中而\node-modules\angular-ui-boostrap\dist\ui-boostrap-tpls.js是@ 4349行

花点时间找我。

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

7 个答案: