模板是指令时的angularjs材料错误答案

【问题标题】：angularjs material error when template is a directive模板是指令时的angularjs材料错误
【发布时间】：2020-04-26 14:54:14
【问题描述】：

我的模板文件是这样的：

<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>

我的指令是：

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

我的对话代码是：

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

am 生成的 html 是：

<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>

它生成2个md-dialog元素，第二个opcity=0，所以对话框只是一个小白框，里面什么都没有。

【问题讨论】：

标签： angularjs angularjs-material

【解决方案1】：

由于模态的模板应该包含在 md-dialog 中：

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

并从staff-profile指令的模板中删除md-dialog。

<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>

这对我有用！

【讨论】：