angularjs material error when template is a directive

Question

my template file like this:

<md-dialog aria-label="ttt" flex="70" md-dragable="md-toolbar">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <md-icon md-font-icon="fa fa-user"></md-icon>
            <h4>ttt</h4>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="cancel()">
                <md-icon md-font-icon="fa fa-times" aria-label="Close dialog"></md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <md-dialog-content layout-padding class="nodrag">
        <form name="frmProfile">
          ...
        </form>
    </md-dialog-content>
</md-dialog>

my directive is:

app.directive('staffProfile', function () {
        return {
            restrict: 'EA',
            replace: true,
            priority:99,
            scope: {
                ngModel: '=?'
            },
            controller: 'staffProfileController',
            templateUrl: '/app/setting/staff/detail.html?ver=0.016',
        }
    });

my dialog code is:

$mdDialog.show({
  fullscreen: true,
  parent: angular.element(document.body),
  template: "<staff-profile ng-model='staff.ID'/>",
  controller: ctrl
});

the am generate html is:

<div class="md-dialog-container ng-scope" tabindex="-1" style="top: 0px; height: 700px;">
   <div class="md-dialog-focus-trap" tabindex="0"></div>
   <md-dialog class="_md md-dialog-fullscreen md-transition-in" role="dialog" tabindex="-1" id="dialogContent_1" aria-describedby="dialogContent_1">
   <md-dialog aria-label="ttt" flex="70" md-dragable="md-toolbar" ng-model="staff.ID" submit="ok" dismiss="cancel" usr-self="true" class="ng-pristine ng-untouched ng-valid ng-isolate-scope _md flex-70 ng-not-empty" aria-invalid="false" style="">
    <md-toolbar class="_md _md-toolbar-transitions">
        ...
    </md-toolbar>
    <md-dialog-content layout-padding="" class="nodrag layout-padding">
        ...
    </md-dialog-content>
 </md-dialog>
 </md-dialog><
 div class="md-dialog-focus-trap" tabindex="0"></div></div>

It generate 2 md-dialog element and the 2nd opcity=0,so the dialog is only a small white box,nothing in it .

Answer 1

Since the template of the modal should be wrapped in a md-dialog:

$mdDialog.show({
  fullscreen: true,
  parent: angular.element(document.body),
  template: "<md-dialog><staff-profile ng-model='staff.ID'/></md-dialog>",
  controller: ctrl
});

And remove the md-dialog from the template of staff-profile directive.

<div aria-label="ttt" flex="70" md-dragable="md-toolbar">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <md-icon md-font-icon="fa fa-user"></md-icon>
            <h4>ttt</h4>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="cancel()">
                <md-icon md-font-icon="fa fa-times" aria-label="Close dialog"></md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <md-dialog-content layout-padding class="nodrag">
        <form name="frmProfile">
          ...
        </form>
    </md-dialog-content>
</div>

This has worked for me!