角度多個$ 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軸深度或增加視覺噪音。 避免使用滾動內容創建對話框，特別是警報。相反，請考慮爲讀取或與大量內容交互進行優化的備用容器或佈局。