如何包含AngularJS的标签

Question

我一直在阅读此文档 ，可以在AngularJS使用“ Modal Dialog Window进行查看。 但是，我不知道如何包括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()" >

我尝试查看如何使用codeopen页面包含md-button标签，但是没有结果。

有人可以说如何在我的Web应用程序中使用这些模式对话框吗？

Answer 1

您需要做几件事：

1. 添加外部js资源（angular-material.js，angular-aria.js等）。
2. 添加外部CSS资源（angular-material.css等）
3. 创建模块时添加外部模块依赖项
   angular.module('module', [<dependency1>,<dependency2>])

这是一个小提琴 ，可以创建一个简单的示例。

Answer 2

###################################################################################
# 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();
        }
    }
})();

//--------------------------------------------------------------------------------