角度多个$ mdDialog

Question

我使用模式选项卡，并且我有通知弹出窗口，当他登录到我的应用程序时，弹出窗口总是显示给用户。它包含用户离线时发生的所有事件。问题是当我点击列表中的任何对象时，它会关闭我的弹出窗口并显示新的模式选项卡。

我想实现此功能。当用户登录时，通知弹出窗口将显示给用户，如果他点击任何对象，它将打开另一个窗口而不关闭我的通知弹出窗口（新事件）。我想在下面的图片上写下类似的东西。

我检查角材料的文档，但没有演示所有甚至没有很好地解释了如何使用multiple: true选项工作，我不知道到底如何使它工作像我想要的。

https://material.angularjs.org/latest/api/service/ $ mdDialog

这是我用来显示通知的弹出窗口代码。

//show new notifications when user log in 
    NotificationService.getUnreadedNotifications(function (data) { 
     //initialization 
     $scope.notification = []; 
     $scope.OverAllCount = 0; 
     $scope.messageNotification = []; 
     $scope.OverAllMessageCount = 0; 

     if (data.ProjectNotifications != null) { 
      angular.forEach(data.ProjectNotifications, function (key, value) { 
       $scope.notification.push(key); 
       $scope.OverAllCount = $scope.OverAllCount + 1; 
      }); 
     } 

     if (data.TasksNotifications != null) { 
      angular.forEach(data.TasksNotifications, function (key, value) { 
       $scope.notification.push(key); 
       $scope.OverAllCount = $scope.OverAllCount + 1; 
      }); 
     } 

     if (data.MessageNotifications != null) { 
      angular.forEach(data.MessageNotifications, function (key, value) { 
       $scope.OverAllMessageCount = $scope.OverAllMessageCount + 1; 
       $scope.messageNotification.push(key); 
      }); 
     } 

     popUpNotification(); 

     $scope.hide = function() { 
      $mdDialog.hide(); 
     }; 

     $scope.cancel = function() { 
      $mdDialog.cancel(); 
     }; 

     $scope.answer = function (answer) { 
      $mdDialog.hide(answer); 
     }; 

     //mark notifications as readed when user click on notification 
     function popUpNotification() { 
      $mdDialog.show({ 
       controller: NotificationController, 
       templateUrl: 'app/components/templates/PopUpNotification.html', 
       parent: angular.element(document.body), 
       //targetEvent: ev, 
       clickOutsideToClose: true, 
       fullscreen: false, 
       scope: $scope, 
       multiple:true, 
       preserveScope: true, 
       onComplete: function() { 
        $scope.notificationPopUp = $scope.notification; 
       } 
      }) 
      .then(function() { 

      }, function() { 
       //fail 
      }); 
     } 
    }); 

这是用于显示在其上用户点击在新的模态重叠标签

 //mark notifications as readed when user click on notification 
    $scope.popUpDetail = function (notification, index, ev) { 
     $mdDialog.show({ 
      controller: NotificationController, 
      templateUrl: 'app/components/templates/TaskDetailsDialog.html', 
      parent: angular.element(document.body), 
      targetEvent: ev, 
      clickOutsideToClose: true, 
      fullscreen: false, 
      scope: $scope, 
      multiple: true, 
      preserveScope: true, 
      onComplete: function() { 
       //was readed => update database 
       NotificationResourceService.update({ id: notification.Id }, notification); 
       $scope.OverAllCount -= 1; 
       $scope.notification.splice(index, 1); 

       TaskService.get({ id: notification.EntityId }) 
        .$promise.then(function (task) { 
         $scope.task = task; 
        }); 
      } 
     }) 
     .then(function() { 

     }, function() { 
      //fail 
     }); 
    } 

Answer 1

不知何故，我发现我的问题的工作解决方案。它可能会在未来帮助某人。

工作代码：

function popUpNotification() { 
      $mdDialog.show({ 
       templateUrl: 'app/components/templates/PopUpNotification.html', 
       clickOutsideToClose: true, 
       bindToController: true, 
       scope: $scope, 
       preserveScope: true, 
       controller: function ($scope, $mdDialog) { 
        $scope.notificationPopUp = $scope.notification; 
        $scope.popUpDetail = function (notification, index, ev) { 
         $mdDialog.show({ 
          controller: function ($mdDialog) { 
           this.click = function() { 
            $mdDialog.hide(); 
           } 
          }, 
          targetEvent: ev, 
          clickOutsideToClose: true, 
          preserveScope: true, 
          autoWrap: true, 
          skipHide: true, 
          scope: $scope, 
          preserveScope: true, 
          templateUrl: 'app/components/templates/TaskDetailsDialog.html', 
          onComplete: function() { 
           TaskService.get({ id: notification.EntityId }) 
            .$promise.then(function (task) { 
             $scope.task = task; 
            }); 
          } 
         }) 
        } 
       }, 
       autoWrap: false, 
      }) 
     } 
     }); 

Answer 2

目前，还没有方法对象的细节代码允许打开多个MD对话框。

根据文档

避免从对话框中打开其他对话框。 全屏对话框可能会打开其他对话框，例如拾取器，因为它们的设计可以容纳额外的材质层，而不会显着增加应用感知的Z轴深度或增加视觉噪音。 避免使用滚动内容创建对话框，特别是警报。相反，请考虑为读取或与大量内容交互进行优化的备用容器或布局。