Angular-Material 无法用按钮关闭 $mdDialog
Angular-Material cannot close $mdDialog with a button
我无法获得关闭模态框的按钮,也无法在模态框外单击以关闭 window。我没有收到错误,使用简单的 Controller 或 ControllerAs 语法时遇到同样的问题。
我的示例模态代码:
angular.module('MyApp').controller('TestCtrl', ["$scope", "$mdDialog",
function($scope, $mdDialog) {
var alert;
$scope.showInfoModal = showGameInfoModal;
// Internal method
function showGameInfoModal(schedule) {
$scope.schedule = schedule;
alert = $mdDialog.show({
clickOutsideToClose: true,
disableParentScroll: true,
escapeToClose: true,
scope: $scope, // use parent scope in template
preserveScope: true, // do not forget this if use parent scope
// Since GreetingController is instantiated with ControllerAs syntax
// AND we are passing the parent '$scope' to the dialog, we MUST
// use 'vm.<xxx>' in the template markup
templateUrl: 'Modules/Test/Test2.html',
controller: function DialogController($scope, $mdDialog) {
$scope.closeDialog = function() {
$mdDialog.hide();
};
},
controllerAs: 'dc'
});
}
}
]);
然后是偏音 HTML:
<md-content>
<md-toolbar flex layout="row" layout-align="center">
<h5>{{schedule.GameDate</h5>
</md-toolbar>
<section layout="column" layout-align="center">
<div ng-init="coords={latitude: false, longitude: false}">
<gm-map options="{center: [43.6576221, -79.607505], zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP}">
<gm-marker options="{position: [43.6576221, -79.607505], draggable: false}">
<gm-infowindow options="{content: 'Max Ward 2'}"></gm-infowindow>
</gm-marker>
</gm-map>
</div>
</section>
<section>
<div class="md-actions">
<md-button ng-click="dc.closeDialog()" class="md-fab md-fab-bottom-right md-mini" aria-label="Close"><ng-md-icon icon="close"></ng-md-icon></md-button>
</div>
</section>
</md-content>
在搜索更多示例时,我发现我遗漏了 <md-dialog>
标签。
<md-dialog aria-label="Game Info and Map">
<md-content>
<md-toolbar flex layout="row" layout-align="center">
...
</md-toolbar>
</md-content>
</md-dialog>
我无法获得关闭模态框的按钮,也无法在模态框外单击以关闭 window。我没有收到错误,使用简单的 Controller 或 ControllerAs 语法时遇到同样的问题。
我的示例模态代码:
angular.module('MyApp').controller('TestCtrl', ["$scope", "$mdDialog",
function($scope, $mdDialog) {
var alert;
$scope.showInfoModal = showGameInfoModal;
// Internal method
function showGameInfoModal(schedule) {
$scope.schedule = schedule;
alert = $mdDialog.show({
clickOutsideToClose: true,
disableParentScroll: true,
escapeToClose: true,
scope: $scope, // use parent scope in template
preserveScope: true, // do not forget this if use parent scope
// Since GreetingController is instantiated with ControllerAs syntax
// AND we are passing the parent '$scope' to the dialog, we MUST
// use 'vm.<xxx>' in the template markup
templateUrl: 'Modules/Test/Test2.html',
controller: function DialogController($scope, $mdDialog) {
$scope.closeDialog = function() {
$mdDialog.hide();
};
},
controllerAs: 'dc'
});
}
}
]);
然后是偏音 HTML:
<md-content>
<md-toolbar flex layout="row" layout-align="center">
<h5>{{schedule.GameDate</h5>
</md-toolbar>
<section layout="column" layout-align="center">
<div ng-init="coords={latitude: false, longitude: false}">
<gm-map options="{center: [43.6576221, -79.607505], zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP}">
<gm-marker options="{position: [43.6576221, -79.607505], draggable: false}">
<gm-infowindow options="{content: 'Max Ward 2'}"></gm-infowindow>
</gm-marker>
</gm-map>
</div>
</section>
<section>
<div class="md-actions">
<md-button ng-click="dc.closeDialog()" class="md-fab md-fab-bottom-right md-mini" aria-label="Close"><ng-md-icon icon="close"></ng-md-icon></md-button>
</div>
</section>
</md-content>
在搜索更多示例时,我发现我遗漏了 <md-dialog>
标签。
<md-dialog aria-label="Game Info and Map">
<md-content>
<md-toolbar flex layout="row" layout-align="center">
...
</md-toolbar>
</md-content>
</md-dialog>