3

通常，您可能会显示Angular Material如下对话框：

$mdDialog.show({
    controller: FooCtrl,
    templateUrl: 'app/foo_modal.html',
    clickOutsideToClose: true
});

相反，我想在内联选项中使用一个组件。template当我尝试这样做时，我看到屏幕变暗，但组件的视图不可见。

似乎组件 ,auth-modal没有被渲染。

<div class="md-dialog-container ng-scope" tabindex="-1" style="top: 0px; height: 371px;">
    <div class="md-dialog-focus-trap" tabindex="0"></div>
    <md-dialog role="dialog" tabindex="-1" id="dialogContent_3" aria-describedby="dialogContent_3" class="md-transition-in">
        <auth-modal></auth-modal>
    </md-dialog>
    <div class="md-dialog-focus-trap" tabindex="0"></div>
</div>
4

2 回答 2

3

这是一个带有工作示例的 Plunker 。

user-detail该示例使用在对话框的内联模板中调用的组件。

$mdDialog.show({
    locals: { users: su },
    controller: DialogController,
    template: '<h2>Selected users ' +
              '<button ng-click="closeDialog()">x</button></h2>' +
              '<user-detail ng-repeat="u in users" user="u">' +
              '</user-detail>',
});

如果您遇到特定问题，请发布错误消息或更多信息。

于 2016-04-18T09:36:10.527 回答
2

在我看来，最好使用<auth-modal>包装在<md-dialog aria-label="xyz"></md-dialog> 标签之间的“虚拟模板” - 请参阅此示例以及问题讨论。然后，您可以使用不必要的样板代码丢弃<foo-modal>（我假设是您发布的 HTML 片段），因为服务会为您处理这些。md-dialog-container$mdDialog

于 2017-04-09T10:19:51.123 回答