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 时出现错误，即 "alert" 未定义。

模板如下所示：

<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 而不是 $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
        }
  });

这是一个示例mdDialog

Answer 2

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

以下 CSS 规则更新是解决问题的一种方法（基于我不想触及模板本身）：

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

Angularjs material 对话框不工作

Angularjs material dialog not working

angularjs

angular-material