MD-Dialog nicht richtig funktioniert?

Question

Ich bin neu in Winkelmaterial:

Ich möchte in einer Tabelle Dialog zum Bearbeiten von Datensatz zeigen:

I Winkelmaterial und Winkel Arie Bezug genommen wird, verwendet ngMaterial Abhängigkeit und $mdDialog Service. Ich habe ein div alle Bearbeitungsfelder enthält, die divvisibility wird auf 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> 

hier ist die showDialog Funktion ::

$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(); 

      }; 
     } 

aber wenn ich auf die Schaltfläche klicken, wird der Dialog nicht erscheinen, richtig, es fehlt die Animation und wird in der gleichen Ebene wie die übergeordnete Seite gerendert:

Answer 1

Sie müssen beziehen sich die Winkelmaterial css

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