Angularjs Material 对话框不起作用

Question

我有一个要在对话框中输出的项目数组。我没有收到错误，但它也不起作用。

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

这应该会打开一个警告对话框，正如 here 所指出的那样
当我尝试 demo code 时我收到错误，未定义“警报”。

模板如下所示:

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

知道我在这里做错了什么吗？没有 AngularJS 错误，也没有对话框。

谢谢 :)

Answer 1

就我而言，我可以在调试器中跟踪 $mdDialog.show() 方法调用的调用，并且控制台中没有出现错误，但也没有出现对话框。事实证明这是一个 CSS 问题，我使用的模板包含的元素的 z-index 高于组成 MD 对话框的组件所使用的 z-index，从而有效地掩盖了对话框消息。

以下 CSS 规则更新是解决问题的一种方法(基于我不想接触模板本身):

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