将组件传递给 Angularjs 对话框模板时删除额外的 md-dialog 包装器

Question

我正在尝试将组件传递到 Angularjs 对话框中，而不用 $mdDialog 将组件的 html 包装在额外的标记中。

这是我的父控制器代码：

vm.showSampleReport = function (questionType) {
            $timeout(function(){
              $mdDialog.show({
                parent: angular.element(document.body),
                template: '<sample-report report-type="questionType"></sample-report>',
                clickOutsideToClose: true,
                locals: {
                  reportType: questionType
                }
              })

我需要这个的原因是因为我希望对话框占据页面的整个高度。在我的组件 html 中，我将内联样式添加到包装器中，但是当整个组件被包装在一个附加的中时，它被覆盖了，默认设置为 max-height: 80%;

这是我的组件 html:

<md-dialog style="border-radius: 0px;height: 100vh;max-height: 100%;" class="print">
  <md-dialog-content layout="column" class="container question-dialog-container">
    <div class="vm.reportType"></div>
  </md-dialog-content>
</md-dialog>

Answer 1

您可以为 $mdDialog.show 使用 autowrap 选项。

autoWrap - {boolean=}: Whether or not to automatically wrap the template with a <md-dialog> tag if one is not provided. Defaults to true. Can be disabled if you provide a custom dialog directive.

https://material.angularjs.org/latest/api/service/$mdDialog#mddialog-show-optionsorpreset

将组件传递给 Angularjs 对话框模板时删除额外的 md-dialog 包装器

Remove extra md-dialog wrapper when passing component to Angularjs dialog template

javascript

html

angularjs

mddialog