角度材質對話框：位置總是在窗口右下方

Question

我想在窗口右下方的網頁上使用角度材質對話框（作爲面板用於某些目的）。

我已經實現類似如下的

$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

這裏有兩個問題：

1 - 我不能夠在頁面上通常滾動。滾動被鎖定。即使滾動功能已啓用，將位置設置爲絕對位置，但向下滾動時，對話框不會停留在底部（它將保持其先前的位置，而不會像滾動一樣向下）。

什麼是最好的方式來實現這樣的對話面板使用材料來創建像谷歌環聊聊天面板（其行爲完全一樣，我想）？

Answer 1

我不知道是否使用$mdToast可能不是一個更好的解決方案 - CodePen

但有一件事要注意的是，你說你的問題「右下角」，但您的演示顯示在右上角的對話框。

標記

<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; 
      }); 
     }; 
    }); 

})(); 

信息：

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