溢出!
我是第一次构建 Angular Material 站点,但我似乎遇到了对话框功能的问题。除了在移动设备上,我可以让盒子正常显示和关闭。即,当用户按下手机上的“清除”或“返回按钮”时。当您执行此操作(或单击浏览器上的后退按钮)时,它不会影响对话框。它仍在视图中并等待输入。按 ESC 键将其关闭。任何打电话的人都会本能地认为他们可以摆脱它,在我看来他们应该这样做。我已经尝试了各种各样的方法,这些方法要么不起作用,我只是没有正确实施它们。所以,来了..
控制器:
'use strict';
app.controller('NavCtrl', function ($scope, $mdDialog) {
$scope.itworked = "Angular Successful";
var dialogContent = ' \
<md-content> \
<div class="diagtest">Content</div> \
<p class="awesome"><a href="#/" ng-click="hide()">This link works</a></p> \
<p><a href="#/portfolio" ng-click="hide()">This link also works</a></p> \
<p>filler</p> \
</md-content> \
';
var noForm = '<md-dialog id="navDialog">' + dialogContent + '</md-dialog>';
var formAround = '<form ng-submit="hide()"><md-dialog>' + dialogContent + '</md-dialog></form>';
var formInside = '<md-dialog><form ng-submit="hide()">' + dialogContent + '</form></md-dialog>';
function makeDialog(tmpl) {
return function(ev) {
$mdDialog.show({
template: tmpl,
targetEvent: ev,
controller: 'DialogController'
});
};
}
$scope.dialogNoForm = makeDialog(noForm);
$scope.dialogFormAround = makeDialog(formAround); \\ This is for future use
$scope.dialogFormInside = makeDialog(formInside); \\ so is this...
});
app.controller('DialogController', function($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide($scope.participant);
};
$scope.cancel = function() {
$mdDialog.cancel();
};
});
任何人都可以建议我愿意尝试。
我尝试了以下方法:
setCancellable(true)
如果按下后退按钮,还尝试使用“导航”技巧关闭对话框,但它不起作用。
您可以在官方文档网站上看到一个具有相同功能的示例。如果您检查对话框,您可以看到它们的功能完全相同。
https://material.angularjs.org/#/demo/material.components.dialog
它们的写法有点不同,但它们在台式机和手机上的行为和我的一样。
提前感谢任何可以阐明的人!我很感激!