使用组件作为模板的 AngularJS 材质对话框答案

【问题标题】：AngularJS Material Dialog using component as template使用组件作为模板的 AngularJS 材质对话框
【发布时间】：2018-05-06 08:29:22
【问题描述】：

我有一个角度组件，我想在 AngularJS 材质对话框中使用它：

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

【问题讨论】：

标签： css angularjs angularjs-material

【解决方案1】：

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

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

【讨论】：