AngularJS Material 使用组件作为模板的对话框

Question

我有一个 angular 组件，我想在 AngularJS Material 对话框中使用它：

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

问题是，当这样定义模板时，生成的 html 看起来像这样：

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

组件元素打破了 md-dialog 和 md-toolbar、md-dialog-content 和 md-dialog-actions 之间的布局，导致布局中断，md-toolbar 和md-dialog-actions 不固定。

所以我的问题是，有没有一种方法可以只呈现没有组件元素 (<publish-dialog></publish-dialog>) 的组件模板内容？

Answer 1

在您的指令中，尝试使用 replace: true。

来自How to use `replace` of directive definition?

AngularJS Material 使用组件作为模板的对话框

AngularJS Material Dialog using component as template

css

angularjs

angularjs-material