CODEWITHSUNDEEP
angularjsangular-material
Florian Reisinger
Florian Reisinger

Reputation: 3088

Angularjs material dialog not working

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

Upvotes: 5

Views: 12631

Answers (2)

John Rix
John Rix

Reputation: 6673

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

Upvotes: 5

Sajeetharan
Sajeetharan

Reputation: 222522

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 a sample mdDialog

Upvotes: 3

Related Questions