編輯:這對角材料1,但這個概念應該是AM2相同。
你將不得不使用自定義對話框來實現這一目標 - CodePen
標記
<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp">
<div class="dialog-demo-content" layout="row" layout-wrap="" layout-margin="" layout-align="center">
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
Custom Dialog
</md-button>
<script type="text/ng-template" id="dialog1.tmpl.html"><md-dialog aria-label="Mango (Fruit)" ng-cloak>
<md-dialog>
<form>
<md-dialog-content>
<div class="md-dialog-content">
<p class="md-title"> Dialog Box: </p>
<div>
<p> Some message </p>
<img style="width:100px" src="...">
</div>
</div>
</md-dialog-content>
<md-dialog-actions layout="row">
<span flex></span>
<md-button class="md-primary" ng-click="answer('Got it')">
Got it
</md-button>
</md-dialog-actions>
</form>
</md-dialog>
</script>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
$scope.status = ' ';
$scope.customFullscreen = false;
$scope.showAdvanced = function(ev) {
var useFullScreen = false;
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
fullscreen: useFullScreen
})
.then(function(answer) {
$scope.status = answer;
}, function() {
$scope.status = 'You cancelled the dialog.';
});
};
});
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}