Question

我是角质材料的新手：

我想在表格中显示编辑记录的对话框：

我引用了角度材质和角度咏叹调，使用了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();

            };
        }

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

Answer 1

您需要参考角度材料css

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

md对话框不能正常工作？

1 个答案: