Angularjs stuff dialog not working

Question

I have an array of elements that I want to display in a dialog box. I do not get the error, but it does not work.

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

This should open the alert dialog as indicated here. When I tried the demo code, I received an error that the “warning” was not defined.

The template is as follows:

 <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> 

Any idea what I'm doing wrong here? There is no AngularJS error and no dialogue.

Thanks:)

Answer 1

You should use $mdDialog.show instead of $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 } }); 

Here is the mdDialog example

Answer 2

In my case, I could trace the call to the $ mdDialog.show () method in the debugger, and no errors appeared in the console, but the dialog did not appear. This turned out to be a CSS issue where the template I used contained elements with a z-index higher than those used by the components that make up the MD dialog, effectively hiding the dialog message.

The following CSS rule updates were one approach to solving the problem (based on the fact that I did not want to touch the template itself):

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