javascript - 关闭后的mdDialog block 界面

Question

我尝试在我的项目中使用 mdDialog。到目前为止，它工作得很好，除了当我关闭它(或隐藏)时，我的用户界面被完全阻止。除非重新加载页面，否则我无法单击任何按钮、链接和元素。

这是对话框初始化的示例代码:

$scope.sentTestNotification = function(firebaseKey, deviceName, deviceOs, username, event) {
            $mdDialog.show({
                controller: function($mdDialog, dataFactory) {
                    var vm = this;
                    vm.notificationInformation = {
                        key: firebaseKey,
                        device: deviceName,
                        os: deviceOs,
                        user: username
                    };
                    vm.notificationsTypes = []
                    dataFactory.get('get-types', {}).then(function(response) {
                        angular.forEach(response.data, function(value, key) {
                           vm.notificationsTypes.push(value.title);
                        });
                    });

                    $scope.answer = function(answer) {
                        $mdDialog.cancel(answer);
                    };
                    $scope.hide = function () {
                        $mdDialog.hide();
                    };
                    $scope.cancel = function () {
                        $mdDialog.cancel();
                    };
                },
                controllerAs: 'modal',
                templateUrl: '/storage/application/views/dashboard/notifications/sendTestNotification.html',
                parent: angular.element(document.body),
                targetEvent: event,
                scope: $scope,
                clickOutsideToClose:true
            }).then(function(response) {
            }, function(response) {
                if (response !== undefined) {
                    if (response.indexOf('send') > -1) {
                        $scope.testDevice.key = firebaseKey;
                        dataFactory.post('send-single', { fields: {
                            key: $scope.testDevice.key,
                            body: $scope.testDevice.body,
                            title: $scope.testDevice.title
                        }}).then(function(response) {
                            var isDlgOpen;
                            $mdToast.show({
                                hideDelay   : 3000,
                                position    : 'top right',
                                controller  : function($scope, $mdToast, $mdDialog) {
                                    var vm = this;
                                    vm.username = $scope.createdUsername;
                                    $scope.closeToast = function () {
                                        if (isDlgOpen) return;
                                        $mdToast
                                            .hide()
                                            .then(function () {
                                                isDlgOpen = false;
                                            });
                                    };
                                },
                                controllerAs: 'toast',
                                templateUrl : '/storage/application/views/dashboard/notifications/testNotificationToast.html'
                            });
                        });
                    }
                }
            });
        };

<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th class="td-content-center">
                    #
                </th>
                <th class="td-content-center">
                    <ng-md-icon icon="person" size="20"></ng-md-icon>
                    <span translate="dashboard.devices.username">Username</span>
                </th>
                <th class="td-content-center">
                    <ng-md-icon icon="devices" size="20"></ng-md-icon>
                    <span translate="dashboard.devices.device">Device</span>
                </th>
                <th class="td-content-center">
                    <ng-md-icon icon="system_update" size="20"></ng-md-icon>
                    <span translate="dashboard.devices.operating_system">Operating System</span>
                </th>
                <th class="td-content-center">
                    <img src="/storage/application/images/firebase.png" width="20px" height="20px" />
                    <span translate="dashboard.devices.subscription">Firebase Subscription</span>
                </th>
                <th class="td-content-center">
                    <ng-md-icon icon="settings" size="20"></ng-md-icon>
                    <span translate="dashboard.devices.actions">Actions</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="device in devicesList">
                <td class="td-content-center">{{device.id}}</td>
                <td class="td-content-center">{{device.username}}</td>
                <td class="td-content-center">{{device.device_name}}</td>
                <td class="td-content-center">
                    <ng-md-icon icon="android" data-ng-show="device.device_id == 0" size="20"></ng-md-icon>
                    <ng-md-icon icon="apple" data-ng-show="device.device_id == 1" size="20"></ng-md-icon>
                    {{device.device_version}}
                </td>
                <td class="td-content-center">
                    <span class="md-btn m-b btn-fw green" data-ng-if="device.firebase_key">Active</span>
                    <span class="md-btn m-b btn-fw red" data-ng-if="!device.firebase_key">Inactive</span>
                </td>
                <td class="td-content-center">
                    <button md-ink-ripple class="md-btn md-raised m-b btn-fw indigo" data-ng-click="sentTestNotification(device.firebase_key, device.device_name, device.device_version, device.username, $event)" translate="dashboard.devices.test_notification">Send Notification</button>
                </td>
                <td>

                </td>
            </tr>
        </tbody>
    </table>

这是我的控制台在单击发送按钮并实际发送通知时显示的内容(发送后，mdDialog 关闭)

我在谷歌上搜索过类似的问题，但没有找到答案。感谢您的帮助!

这是 Plunker 示例:
http://plnkr.co/edit/GK3cPryqsKO2kKqtmf6m?p=preview

Answer 1

我和你遇到了同样的问题。我认为这是因为 md-dialog 在关闭后会破坏“作用域”。您需要做的是在 mdDialog.show 中添加“preserveScope : true”。