は通常、あなたがこのような<code>Angular Material</code>とのダイアログが表示される場合があります

Question

$ mdDialogのインラインテンプレートとしてコンポーネントを使用してください。それをやろうとすると、画面は暗くなりますが、コンポーネントのビューは表示されません。

コンポーネント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> 

Answer 1

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

問題が発生している場合は、エラーメッセージやその他の情報を投稿してください。

Answer 2

私の意見では、あなたの<auth-modal>が<md-dialog aria-label="xyz"></md-dialog>タグの間にラップされた「ダミーテンプレート」を使用する方が良いと言います - this exampleを参照してください。それで<foo-modal>（あなたが投稿したHTMLスニペットであると仮定します）にmd-dialog-containerの定型コードを入れて、$mdDialogサービスがそれを処理します。