Angularjs material dialog not working

Question

I have an Array of items which I want to output in a dialog. I do not get an error, but it is not working either.

    $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 an alert dialog as pointed out here When I tried the demo code I got the error, that "alert" is not defined.

The template looks like this:

<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 am doing wrong here? No AngularJS error and no dialog.

Thank you :)

Answer 1

In my case, I could trace the invocation of the $mdDialog.show() method call within the debugger, and no errors appeared in the console, yet no dialog appeared. It proved to be a CSS issue, where the template I was using contained elements with a z-index higher than that used by the components making up the MD dialog, effectively obscuring the dialog message.

The following CSS rule updates were one approach to solving the problem (on the basis 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; }