Angularjs材质对话框不起作用

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

这应该打开为指出一个警告对话框这里 当我尝试了演示代码我得到了错误,说:"通知"没有定义.

模板看起来像这样:

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

Answer 2

你应该使用$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