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

使用材料创建类似Google环聊聊天面板（其行为与我想要的完全相同），实现此类对话框面板的最佳方式是什么？

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

角度材质对话框：位置始终位于窗口的右下角

1 个答案: