【问题标题】:mdDialog block interface after closed关闭后的mdDialog块界面
【发布时间】:2016-07-19 02:10:44
【问题描述】:

我尝试在我的项目中使用 mdDialog。到目前为止,它运行良好,除了当我关闭它(或隐藏)时,我的 UI 完全被阻止。除非我重新加载页面,否则我无法点击任何按钮、链接、元素。

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

$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

【问题讨论】:

  • 右键单击页面并选择“检查”时会看到什么? (假设您使用的是 chrome )
  • 用控制台输出更新帖子
  • 当您检查页面元素时,您是否看到覆盖仍然打开?一个透明的覆盖 div 很有可能仍然覆盖在具有高 z-index 值的页面上。否则很难调试问题。
  • 不,没有覆盖,比较了打开mdDialog前后的页面代码。唯一的区别是&lt;button md-ink-ripple class= 更改为&lt;button md-ink-ripple="" class=。将其更改回 md-ink-ripple 没有任何作用
  • 为此创建一个jsfiddle会不会太难?

标签: javascript jquery angularjs mddialog


【解决方案1】:

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

【讨论】:

  • 题主应将此答案标记为正确!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-04-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-14
  • 1970-01-01
相关资源
最近更新 更多