通常,您可能会显示一个Angular Material
对话框,如下所示:
$mdDialog.show({
controller: FooCtrl,
templateUrl: 'app/foo_modal.html',
clickOutsideToClose: true
});
我希望在内联template
选项中使用component。当我尝试这样做时,我看到屏幕变暗,但组件的视图不可见。
似乎组件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>
答案 0 :(得分:3)
Here is a 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>',
});
如果您遇到特定问题,请发布错误消息或更多信息。
答案 1 :(得分:2)
在我看来,最好使用“虚拟模板”,这是<auth-modal>
包裹在<md-dialog aria-label="xyz"></md-dialog
&gt;之间的<foo-modal>
标签 - 请参阅this example以及问题讨论。然后,您可以放弃md-dialog-container
(我假设您发布的HTML代码段),其中包含不必要的$mdDialog
样板代码,因为CalendarView
服务可以为您处理。