Question

我确实有一个包含4个图形的页面，并且在每个图形的右上角都有一个导出图标（md-icon）。单击导出图标时，将打开一个对话框，假设该对话框在每个图形的特定导出图标附近打开。在以默认分辨率正常加载页面时，页面在一行中显示两个图形，而在另两行中显示其他两个图形的上部，因此要查看下面的两个图形，您需要向下滚动。现在，如果我单击第二行图的导出图标而不向下滚动，则对话框将显示在顶部图的附近。以下是该页面的代码： HTML：

    <div layout="column" class="col-xs-4 col-xs-pull-8 export-height" ng-if="vm.totalOfVolumeOverTime != 0" ng-click='vm.showExportReportPopover($event, "Volume Over Time")'>
                            <md-icon id = "export_VOT" md-menu-original class="mdi icon-download material-icons export-icon"></md-icon>
                        </div>
<div layout="column" class="col-xs-4 col-xs-pull-8 export-height" ng-if="vm.totalCountOfTestByVolume != 0"  ng-click='vm.showExportReportPopover($event, "Top 10 Tests By Volume")'>
                        <!-- <md-tooltip>Export</md-tooltip> -->
                        <md-icon id = "export_top10TestsByVolume" md-menu-original class="mdi icon-download material-icons export-icon"></md-icon>
                </div>

第二行图导出图标div

<div layout="column" class="col-xs-4 col-xs-pull-8 export-height" ng-if="vm.totalOfSpendOverTime != 0" ng-click='vm.showExportReportPopover($event, "Spend Over Time")'>
                            <!-- <md-tooltip>Export</md-tooltip> -->
                            <md-icon id = "export_SOT" md-menu-original class="mdi icon-download material-icons export-icon"></md-icon>
                    </div>
<div layout="column" class="export-height" ng-if="vm.totalOfTopTestforSpend != 0" ng-click='vm.showExportReportPopover($event, "Top 10 Tests By Spend")'>
                        <!-- <md-tooltip>Export</md-tooltip> -->
                        <md-icon id = "export_top10TestsBySpend" md-menu-original class="mdi icon-download material-icons export-icon"></md-icon>
                </div>

单击所有图形的导出图标后打开的对话框位置的JS代码：

vm.showExportReportPopover = function(ev, graphName) {
          var element = ev.target;
          var position;
          position = this._mdPanel.newPanelPosition()
          .relativeTo(element)
          .addPanelPosition(this._mdPanel.xPosition.ALIGN_END, this._mdPanel.yPosition.CENTER);

var config = {
            attachTo: angular.element(document.body),
            .......
            position: position,
            ...
            }

现在，每次我单击第二行图的导出图标时，当第二行图未向下滚动时，它会在第一行图附近打开。

单击一个md图标打开一个对话框

0 个答案: