我尝试在我的项目中使用 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