eine Komponente als Inline-Vorlage verwenden für $ mdDialog

Question

Normalerweise könnte man einen Dialog mit Angular Material wie folgt zeigen:

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

ich stattdessen ein component in der Inline-template Option verwenden möchte. Wenn ich das versuche, wird der Bildschirm abgeblendet, aber die Ansicht der Komponente ist nicht sichtbar.

Es scheint, als ob die Komponente auth-modal nicht gerendert wird.

<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 mit einem funktionierenden Beispiel.

Das Beispiel verwendet eine Komponente mit der Bezeichnung user-detail in der Inline-Vorlage eines Dialogfelds.

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

Wenn Sie ein bestimmtes Problem haben, senden Sie bitte die Fehlermeldung oder einige weitere Informationen.

Answer 2

Meiner Meinung nach ist es besser, eine ‚Dummy-Vorlage‘ zu verwenden, die Ihre <auth-modal> zwischen <md-dialog aria-label="xyz"></md-dialog> -Tags eingewickelt ist - siehe this example zusammen mit der Frage Diskussion. Dann könnten Sie die <foo-modal> (die ich nehme, ist das HTML-Snippet, das Sie gepostet haben) mit dem unnötigen md-dialog-container Boilerplate-Code als $mdDialog Service abstellen, kümmert sich das für Sie.