角度材质对话框:位置总是在窗口右下方
问题描述:
我想在窗口右下方的网页上使用角度材质对话框(作为面板用于某些目的)。角度材质对话框:位置总是在窗口右下方
我已经实现类似如下的
$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 - 我不能够在页面上通常滚动。滚动被锁定。即使滚动功能已启用,将位置设置为绝对位置,但向下滚动时,对话框不会停留在底部(它将保持其先前的位置,而不会像滚动一样向下)。
什么是最好的方式来实现这样的对话面板使用材料来创建像谷歌环聊聊天面板(其行为完全一样,我想)?
答
我不知道是否使用$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