Angular Material Dialog: Position immer unten rechts von Windows

Question

Ich versuche, eckigen Material Dialog (um als ein Panel für einige Zwecke verwendet werden) auf Webseiten immer unten rechts im Fenster positioniert.

Ich habe so etwas wie die folgenden

implementiert

$mdDialog.show({ 
     controller: function($scope, $mdDialog){ 
     // do something with dialog scope 
     }, 
     template: '<md-dialog aria-label="My Dialog" style="position: absolute; bottom: 0; right: 0;">'+ 
        '<md-dialog-content class="sticky-container">Blah Blah' + 
        '</md-dialog-content>' + 
        '<md-button ng-click=close()>Close</md-button>' + 
        '</md-dialog>', 
     targetEvent: elementWrapper, 
     hasBackdrop: false 
    }); 
    }; 

https://plnkr.co/edit/lpFH2L?p=preview

Es gibt zwei Probleme:

1- Ich bin nicht in der Lage normalerweise auf der Seite zu blättern. Die Schriftrolle ist gesperrt. 2- Auch wenn der Bildlauf aktiviert ist und die Position auf absolut eingestellt ist, bleibt der Dialog beim unteren Bildlauf nicht unten (er bleibt auf seiner vorherigen Position, ohne als Bildlauf nach unten zu gehen).

Was ist der beste Weg, um ein solches Dialogfeld mit Material zu schaffen, um etwas wie Google Hangout Chat Panel (die sich genau so, wie ich will) zu erstellen?

Answer 1

Ich frage mich $mdToast bei Verwendung von möglicherweise nicht eine bessere Lösung - CodePen

Eine Sache, obwohl zu beachten ist, dass man „unten rechts“ in Ihrer Frage sagen, aber Ihre Demo zeigt den Dialog in der oberen rechten.

Markup

<div ng-controller="AppCtrl" class="inset toastdemoCustomUsage" ng-cloak="" layout-padding ng-app="MyApp"> 
    <md-button ng-click="showCustomToast()" class="md-raised" style="padding-left: 10px;padding-right: 10px;"> 
    Open 
    </md-button> 

    <script type="text/ng-template" id="toast-template.html"><md-toast> 
    <span class="md-toast-text" flex>Blah blah</span> 
    <md-button ng-click="closeToast()"> 
    Close 
    </md-button> 
</md-toast> 
</script></div> 

JS

(function() { 

    var isDlgOpen; 

    angular 
    .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
    .controller('AppCtrl', function($scope, $mdToast) { 
     $scope.showCustomToast = function() { 
     $mdToast.show({ 
      hideDelay : 0, 
      position : 'top right', 
      controller : 'ToastCtrl', 
      templateUrl : 'toast-template.html' 
     }); 
     }; 
    }) 
    .controller('ToastCtrl', function($scope, $mdToast, $mdDialog) { 

     $scope.closeToast = function() { 
     if (isDlgOpen) return; 

     $mdToast 
      .hide() 
      .then(function() { 
      isDlgOpen = false; 
      }); 
     }; 
    }); 

})(); 

Info:

https://material.angularjs.org/latest/demo/toast https://material.angularjs.org/latest/api/service/ $ mdToast