【问题标题】:Angular UI Dialog - Closing and Reopening from Dialog causes BackgroundAngular UI 对话框 - 从对话框关闭和重新打开会导致背景
【发布时间】:2013-04-25 12:26:42
【问题描述】:

我正在尝试从实际对话框控制器的视图中关闭并重新打开一个对话框。最终发生的是对话框关闭/打开后,它不会再次正确关闭。 Escape 在某些浏览器上有效(但覆盖仍然存在),单击背景可能会导致对话框关闭但覆盖将保留(取决于浏览器)。

问题:如何从对话框控制器上的函数/按钮/事件关闭/重新打开对话框,并且对话框的关闭工作正常(在转义或单击背景时)。

下面的演示只是一个简化的示例,它演示了这个问题,因为我将执行下一个/上一个,我想关闭/打开这些点击,但我遇到了无法退出模式的问题.

这里是在线演示:http://plnkr.co/h8djNiSlH6c7d8SNzMmb

  1. 打开对话框
  2. 关闭对话框 - 工作正常,除了 IE(另一个问题)。
  3. 打开对话框
  4. 单击对话框内的按钮关闭/重新打开
  5. 尝试关闭对话框

控制器:

function PopupCtrl($scope, $dialog, dialog, item, Utils) {

    $scope.items = Utils.getItems();
    $scope.item = item;
    $scope.reOpen = function (item) {
        item = $scope.items[1];
        dialog.close();
        var d = $dialog.dialog({
            dialogFade: true,
            backdropClick: true,
            dialogOpenClass: 'modal-open',
            resolve: {
                item: function () {
                    return angular.copy(item)
                }
            }
        });
        d.open('dialog.html', 'PopupCtrl');
    };
}

function MainCtrl($scope, $window, $dialog, $location, $timeout, Utils) {
    $scope.items = Utils.getItems();

    $scope.openDialog = function (item) {
        item = $scope.items[0];
        var d = $dialog.dialog({
            dialogFade: true,
            dialogOpenClass: 'modal-open',
            resolve: {
                item: function () {
                    return angular.copy(item)
                }
            }
        });
        d.open('dialog.html', 'PopupCtrl');

    };

}

我已经使用 angular bootstrap v0.2.0 和 v.0.3.0 进行了尝试,所以它要么是一个错误,要么是我在编写逻辑方面缺少一些东西。

【问题讨论】:

  • 那是一些疯狂的东西。我假设存在一些范围冲突(例如 PopupCtrl 在 dialog.close() 上超出范围),所以我尝试将对话框打开代码移动到服务并在 setTimeout 之后调用它,但是当我这样做时,没有新对话框打开,好像 PopupCtrl 内部的 $dialog 在关闭后以某种方式受到污染。
  • 是的,我就是想不通。动画在 chrome 和 ie 中看起来很棒,但在 FF 中没有那么多,但这只是一个旁白
  • 我最终提交了一个关于该项目的问题和拉取请求。

标签: angularjs modal-dialog angular-ui-bootstrap


【解决方案1】:

这原来是核心对话框指令的问题。提交了一个问题和随后的拉取请求以解决:

详情请看:https://github.com/angular-ui/bootstrap/pull/381

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-10
    • 1970-01-01
    • 2015-12-30
    • 2011-11-20
    • 1970-01-01
    相关资源
    最近更新 更多