md 对话框无法正常工作？答案

【问题标题】：md dialog not working properly?md 对话框无法正常工作？
【发布时间】：2017-03-11 08:30:48
【问题描述】：

我是角度材料的新手：

我想显示用于编辑表中记录的对话框：

我引用了 angular material 和 angular aria，使用了 ngMaterial 依赖和 $mdDialog 服务。我有一个包含所有编辑字段的 div，div visibility 设置为 hidden：

<div style="visibility: hidden">
    <div class="md-dialog-container" id="taskEdit">
        <md-dialog style="width:100%; height:100%" layout-padding>
            <md-toolbar>
                <div class="md-toolbar-tools">
                    <h2>Edit Task</h2>
                    <span flex></span>
                </div>
            </md-toolbar>
            <ng-form name="TaskForm">
                <div layout-gt-sm="row">
                    <md-input-container>
                        <label>Task Title</label>
                        <input name="TaskTitle" ng-model="task.title" required>
                        <div ng-messages="TaskForm.TaskTitle.$error">
                            <div ng-message="required">This is required</div>
                        </div>
                    </md-input-container>

                    <md-input-container class="md-block" flex-gt-sm>
                        <label>Description</label>
                        <textarea ng-model="task.description" md-maxlength="150" md-select-on-focus></textarea>
                    </md-input-container>
                    <md-input-container class="md-block">
                        <label>Due Date</label>
                        <md-datepicker style="margin-top: 2px;" ng-model="task.dueDate"></md-datepicker>
                    </md-input-container>

                    <md-input-container>
                        <label>Task Status</label>
                        <input name="TaskStatus" ng-model="task.status">
                    </md-input-container>
                </div>
            </ng-form>

            <input class="btn btn-primary" style="width:15%" type="submit" ng-disabled="!TaskForm.$valid" ng-click="EditTask()" value="Submit" aria-label="submit" />

        </md-dialog>
    </div>
</div>

这是showDialog 函数::

  $scope.showDialog = function () {

        $mdDialog.show({
            controller: DialogController,
            contentElement: '#taskEdit',
            parent: angular.element(document.body),
            clickOutsideToClose: true
        });
    };

function DialogController($scope, $mdDialog) {
            $scope.hide = function () {
                $mdDialog.hide();

            };
            $scope.cancel = function () {

                $mdDialog.cancel();

            };
        }

但是当我单击按钮时，对话框没有正确显示，它缺少动画并且呈现在与父页面相同的图层中：

【问题讨论】：

我忘记了，非常感谢:)
作为答案发布:)

标签： angularjs angular-material

【解决方案1】：

你需要参考角度材质css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">

【讨论】：

当我点击编辑时，我应该把task详情的$scope放在showDialog还是控制器中？
是否有关闭按钮而不是clickOutsideToClose？
您可以使用 mdbutton 并在点击时关闭
谢谢@Sajeetharan :)