我一直在this docs阅读a codeopen page，我可以在Modal Dialog Window中使用AngularJS查看。但是，我无法弄清楚如何包含md-button标记：
我得到的代码片段是：
<md-button class="md-primary md-raised edgePadding" ng-click="openFromLeft()" >
Open From Left - Close To Right
</md-button>
<md-button class="md-primary md-raised edgePadding" ng-click="openOffscreen()" >
我试图了解如何使用{{3}}包含md-button代码，但是没有结果。
有人可以说我如何在我的网络应用程序中使用这些模态对话框？
答案 0 :(得分：1)
你需要做几件事：
"scripts":{"testCmd" : "start cmd.exe @cmd /k \"echo \"hello there\" && exit 1\""} 这是一个小fiddle，可以创建一个快速示例。
答案 1 :(得分：1)
###################################################################################
# Here is a simple example that works
# Ensure that you use md-dialog to begin and end the modal
# as shown in the example below.
###################################################################################
<md-card>
<md-card-content>
<form name="dialogForm">
<md-button
class="md-primary md-raised"
ng-disabled="dialogForm.$invalid"
ng-click="vm.createDialog($event, vm.newDialog)">
Create Dialog
</md-button>
</form>
</md-card-content>
</md-card>
//---------------------------------------------------------------------------------
(function() {
'use strict';
angular
.module('app.foo.dialog')
.controller('DialogsController', DialogsController);
/* @ngInject */
function DialogsController($mdDialog) {
var vm = this;
vm.createDialog = createDialog;
vm.newDialog = {
title: 'Are you sure?',
content: 'This will delete your files!',
ok: 'Agree',
cancel: 'Disagree'
};
function createDialog($event, dialog) {
$mdDialog.show(
$mdDialog.confirm()
.title(dialog.title)
.textContent(dialog.content)
.ok(dialog.ok)
.cancel(dialog.cancel)
.targetEvent($event)
);
}
}
})();
###################################################################################
# Here is a real life example that works
# Ensure that you use md-dialog to begin and end the modal
# as shown in the example below.
###################################################################################
# users-list.tmpl
<table md-data-table class="md-data-table" md-progress="vm.deferred">
<thead md-order="vm.query.contact" md-trigger="vm.getUsers">
<tr>
<th name="password" order-by="password"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in vm.users>
<td>
<div flex layout="row">
<div>
<md-button class="md-warn md-button" ng-click="vm.openPasswordReset(contact, $event)">
Reset Password
</md-button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
//--------------------------------------------------------------------------------
# users-list.controller
(function() {
'use strict';
angular
.module('app.foo.admin')
.controller('UsersListController', UsersListController);
/* @ngInject */
function UsersListController(
$scope,
$state,
$timeout,
$mdDialog,
userSvc) {
var vm = this;
vm.clientSvc = clientSvc;
vm.userSvc = userSvc;
vm.openPasswordReset = openPasswordReset;
activate();
function activate() {
// init users
vm.userSvc.get().then(
function(users) {
initSearchString(users);
vm.users = users;
},
function(error) {
$log.error(error);
}
);
}
function openPasswordReset(contact, $event) {
var dialogConfig = {
controller: 'PasswordResetController',
controllerAs: 'vm',
templateUrl: 'app/foo/admin/users/password-reset-dialog.tmpl.html',
targetEvent: $event,
contact: contact
};
$mdDialog.show(dialogConfig);
}
}
})();
//--------------------------------------------------------------------------------
# password-reset-dialog.tmpl.html
<md-dialog class="contact-dialog mobile-fullwidth-dialog" flex="40" flex-xs="100">
<md-toolbar>
<div class="md-toolbar-tools">
<h2 flex>
<span>Password Reset</span>
</h2>
<md-button class="md-icon-button" ng-click="vm.cancelClick()" aria-label="cancel">
<md-icon md-font-icon="zmdi zmdi-close"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content class="md-dialog-content">
<div flex="100" flex-gt-md="100">
<div class="padding-0">
<form name="resetPasswordUserForm">
<div layout="row" layout-xs="column">
<div flex="100" flex-xs="100">
<div flex layout="row">
<md-input-container flex="100">
Email
<md-icon md-font-icon="zmdi zmdi-email" style="color:#47B2E8"></md-icon>
<input
id="email"
label="email"
name="email"
type="email"
ng-model="vm.contact.email"
ng-disabled="!vm.isNew"
required/>
<div ng-messages="resetPasswordUserForm.email.$error">
<div ng-message when="required"><span translate>USER_MANAGEMENT.EMAIL.PLEASE_ENTER</span></div>
<div ng-message when="email"><span translate>USER_MANAGEMENT.EMAIL.PLEASE_VALID</span></div>
</div>
</md-input-container>
</div>
</div>
</div>
<div flex layout="row">
<md-input-container flex="100">
First Name
<md-icon md-font-icon="zmdi zmdi-account" style="color:#47B2E8"></md-icon>
<input
id="firstNameEditUser"
label="firstName"
name="firstName"
type="text"
ng-model="vm.contact.firstName"
ng-disabled="!vm.isNew"
required/>
<div ng-messages="resetPasswordUserForm.firstName.$error">
<div ng-message when="required"><span translate>Please enter first name</span></div>
</div>
</md-input-container>
</div>
<div flex layout="row">
<md-input-container flex="100">
Last Name
<md-icon md-font-icon="zmdi zmdi-account-o" style="color:#47B2E8"></md-icon>
<input
id="lastNameEditUser"
label="lastName"
name="lastName"
type="text"
ng-model="vm.contact.lastName"
ng-disabled="!vm.isNew"
required/>
<div ng-messages="resetPasswordUserForm.lastName.$error">
<div ng-message when="required"><span translate>Please enter last name</span></div>
</div>
</md-input-container>
</div>
<div layout="row" layout-align="center center">
<md-progress-circular ng-show="vm.loading" md-mode="indeterminate"></md-progress-circular>
</div>
</form>
</div>
</div>
</md-dialog-content>
<md-dialog-content>
<div layout="row" class="user-management-card-footer" layout-align="end center">
<md-button
class="md-warn md-raised md-button"
ng-click="vm.cancelClick()"
aria-label="{{Cancel | translate}}"
translate="Cancel">
</md-button>
<md-button
class="md-raised md-primary margin-left-0"
ng-click="vm.okClick()"
ng-disabled="!vm.contact.email"
aria-label="{{Reset Password | translate}}"
translate="Reset Password">
</md-button>
</div>
</md-dialog-content>
</md-dialog>
//--------------------------------------------------------------------------------
(function() {
'use strict';
angular
.module('app.foo.admin')
.controller('PasswordResetController', PasswordResetController);
/* @ngInject */
function PasswordResetController(
$window,
$mdDialog,
$mdToast,
$filter,
$log,
$state,
userSvc,
contact,
session) {
var vm = this;
vm.cancelClick = cancelClick;
vm.closeDialogClick = closeDialogClick;
vm.okClick = okClick;
vm.contact = contact;
vm.title = '';
vm.mode = '';
vm.loading = false;
vm.session = session;
vm.isUpdateMode = function() {
return vm.mode === 'reset' ? true : false;
};
activate();
function activate() {
// init mode [reset]
if (angular.isDefined(vm.contact)) {
vm.title = 'Password Reset';
vm.mode = 'reset';
vm.isNew = false;
}
}
function okClick() {
switch( vm.mode ) {
case 'reset':
reset();
closeDialogClick();
break;
default:
closeDialogClick();
break;
}
}
function reset() {
vm.loading = true;
vm.session.sendPasswordReset(vm.contact.email).then(
function() {
vm.loading = false;
$mdToast.show(
$mdToast.simple()
.content('Sent Email to User "' + vm.contact.firstName + ' ' + vm.contact.lastName + '"')
.position('bottom right')
.highlightAction(true)
.hideDelay(6000)
).then(function() {
$state.go('login');
});
},
function(error) {
vm.loading = false;
$log.error(angular.toJson(error));
}
);
}
function cancelClick() {
$mdDialog.cancel();
}
function closeDialogClick() {
$mdDialog.cancel();
}
}
})();
//--------------------------------------------------------------------------------