AngularJS Material Dialog using component as template

Question

I have an angular component which I want to use in an AngularJS Material dialog:

return $mdDialog.show({
    template: '<publish-dialog user="$ctrl.user" target-collection="$ctrl.targetCollection"></publish-dialog>',
    controller: function () {
        this.user = user;
        this.targetCollection = targetCollection;
    },
    controllerAs: '$ctrl',
    targetEvent: event,
    clickOutsideToClose: true
});

The problem is, that when defining the template like this, the generated html looks like this:

<md-dialog>
  <publish-dialog>
    <md-toolbar></md-toolbar>
    <md-dialog-content></md-dialog-content>
    <md-dialog-actions></md-dialog-actions>
  </publish-dialog>
<md-dialog>

The component element is breaking the between md-dialog and md-toolbar, md-dialog-content and md-dialog-actions leads to a layout break and the md-toolbar and the md-dialog-actions are not fixed.

So my question is, is there a way to only render the component template contents without the component element (<publish-dialog></publish-dialog>)?

Answer 1

In your directive, try using replace: true.

From How to use `replace` of directive definition?