Angular $mdDialog - отображение в том же окне

Я возился с $mdDialog и дословно скопировал код из демонстрации Angular.org. При выполнении результат отображается в текущем окне, а не в наложенном диалоговом окне, как в примере. Результат одинаков для каждого сценария (предупреждение, подтверждение, приглашение, пользовательский и вкладка) и был запущен как в Chrome, так и в Firefox.

Следующий CodePen повторяет проблему. HTML-код ниже с CSS и JS в CodePen.

<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>

Любые мысли с благодарностью.

Источник

1 ответ

Решение

Проблема решена. Изучив немного больше о CodePen и добавив ресурсы, в проекте понадобился ресурс CSS.

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

Источник
Другие вопросы по тегам