角度材质对话框：位置总是在窗口右下方

我想在窗口右下方的网页上使用角度材质对话框（作为面板用于某些目的）。角度材质对话框：位置总是在窗口右下方

我已经实现类似如下的

$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 - 我不能够在页面上通常滚动。滚动被锁定。即使滚动功能已启用，将位置设置为绝对位置，但向下滚动时，对话框不会停留在底部（它将保持其先前的位置，而不会像滚动一样向下）。

什么是最好的方式来实现这样的对话面板使用材料来创建像谷歌环聊聊天面板（其行为完全一样，我想）？

来源

2016-09-21 ComeRun

我不知道是否使用$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>

(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

来源

2016-09-21 08:23:18

角度材质对话框：位置总是在窗口右下方

回答

相关问题