角度の倍数$ 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深度や視覚的なノイズを大幅に増加させることなく、 スクロールするコンテンツ（特にアラート）を含むダイアログを作成しないでください。代わりに、大量のコンテンツを読み込みまたは相互作用するために最適化された別のコンテナまたはレイアウトを検討してください。