javascripthtmlangularjsmddialog

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

I'm trying to pass a component into an Angularjs dialog without $mdDialog wrapping the html of my component in an extra tag.

Here is my parent controller code:

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

The reason I need this is because I want the dialog to take up the full height of the page. Inside my component's html, I add inline styles to an wrapper, but that is over-written when the entire component is wrapped in an additional , which is set by default to max-height: 80%;

Here is my component's 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>
Solution

  • You can use the autowrap option for $mdDialog.show.

    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