javascript - Angular Material 对话框 : position always bottom right of windows

Question

我正在尝试在始终位于窗口右下角的网页上使用 Angular Material 对话框(出于某些目的用作面板)。

我已经实现了类似下面的东西

    $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- 我无法在页面上正常滚动。卷轴被锁定。 2- 即使启用了滚动，将位置设置为绝对位置，当向下滚动时，对话框也不会停留在底部(它将保留在其先前的位置而不会向下滚动)。

使用 Material 创建类似 google hangout 聊天面板(其行为完全符合我的要求)来实现此类对话框面板的最佳方法是什么？

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/ $md toast