Question

我一直在搞乱$ 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>

非常感谢任何想法。

Answer 1

问题已解决。在了解了有关CodePen和添加资源的更多信息后，项目中需要CSS资源。

https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css

Angular $ mdDialog - 在同一窗口中显示

1 个答案: