Angularjs Materialdialog funktioniert nicht

Question

Ich habe ein Array von Elementen, die ich in einem Dialog ausgeben möchte. Ich bekomme keinen Fehler, aber es funktioniert auch nicht.

$scope.showDialog = function (ev) { 
     $mdDialog.alert({ 
     controller: 'DialogController', 
     controllerAs: 'DiaCtrl', 
     templateUrl: 'softwareused.tmpl.html', 
     parent: angular.element(document.body), 
     targetEvent: ev, 
     locals: { 
      items: cvLibsUsed 
     } 
    }); 
}; 

Dies sollte eine Warnung Dialog öffnen, wie here wies darauf hin, Als ich die demo code versuchte ich die Fehlermeldung anzeigt, dass „Alarm“ ist nicht definiert.

Die Vorlage sieht wie folgt aus:

<md-dialog aria-label="Software used"> 
<md-dialog-content> 
    <h2>Software used</h2> 
    <ul> 
     <li ng-repeat="cur in locals.items"><a ng-href="{{cur.url}}">{{cur.desc}}</a> - (<a 
       ng-href="{{cur.licenceUrl}}">{{cur.licence}}</a> 
      ) 
     </li> 
    </ul> 
</md-dialog-content> 
<md-dialog-actions layout="row"> 
    <md-button class="md-icon-button" ng-click="close()" aria-label="Close dialog" md-autofocus> 
     Close 
    </md-button> 
</md-dialog-actions> 

Jede Idee, was ich hier falsch mache? Kein AngularJS-Fehler und kein Dialog.

Danke :)

Answer 1

Sie $mdDialog.show Statt $mdDialog.alert

$scope.showDialog = function (ev) { 
     $mdDialog.show({ 
     controller: 'DialogController', 
     controllerAs: 'DiaCtrl', 
     templateUrl: 'softwareused.tmpl.html', 
     parent: angular.element(document.body), 
     targetEvent: ev, 
     locals: { 
      items: cvLibsUsed 
     } 
    }); 

Hier eine Probe mdDialog

Answer 2

In meinem Fall nutzen sollte, konnte ich den Aufruf der Spuren $ mdDialog.show() -Methodenaufruf innerhalb des Debuggers, und keine Fehler in der Konsole angezeigt, noch kein Dialogfeld angezeigt. Es stellte sich heraus, dass es sich um ein CSS-Problem handelte, bei dem die Vorlage, die ich verwendete, Elemente mit einem höheren Z-Index als die Komponenten enthielt, die den MD-Dialog bildeten.

Die folgenden CSS-Regel-Updates waren ein Ansatz zur Lösung des Problems (auf der Grundlage, dass ich nicht die Vorlage selbst berühren wollte):

.md-scroll-mask { z-index: 2000; } 
md-backdrop.md-dialog-backdrop { z-index: 2019; } 
.md-dialog-container { z-index: 2020; }