我一直在搞乱 $mdDialog 并从Angular.org Demo逐字复制代码。执行时，结果显示在当前窗口中，而不是像示例中那样的覆盖对话框。每种方案（警报、确认、提示、自定义和选项卡）的结果都是相同的，并且已在 Chrome 和 Firefox 中运行。
以下CodePen复制了该问题。下面是 HTML 以及 CodePen 中的 CSS 和 JS。
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>MVA Intro to Angular</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Custom CSS -->
<link href="assets/css/fundraising-section.css" rel="stylesheet">
</head>
<!--<body ng-app="mainApp">-->
<body ng-controller="testDialogCtrl">
<div ng-controller="testDialogCtrl">
<md-button class="md-primary md-raised" ng-click="showAlert($event)">
Alert Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showConfirm($event)">
Confirm Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showPrompt($event)">
Prompt Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
Custom Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showTabDialog($event)">
Tab Dialog
</md-button>
</div>
<!-- /.container -->
<!--<script type="text/ng-template" id="uiSelect" src="app/shared/uiSelect.html"></script>-->
<script src="Scripts/angular/angular.js"></script>
<script src="Scripts/angular-material/angular-material.js"></script>
<script src="Scripts/angular-animate/angular-animate.js"></script>
<script src="Scripts/angular-aria/angular-aria.js"></script>
<script src="app/app.module.js"></script>
<!--<script src="app/main.js"></script>-->
<script type="text/javascript">
console.log("angular object", angular);
</script>
</body>
</html>
任何想法都非常感谢。