Question

我维护一个使用AngularJS作为其前端的小型webapp。

该应用程序只是提供了一个信息表，显示了框架中一堆后端服务调用的成功/失败率。

该表比屏幕长，因此它会显示一个滚动条，以便可以看到表格的其余部分。

单元格中的大多数数据都是可点击的链接，会显示一个对话框，显示有关该单元格中数据的更多信息。

我发现当我点击该链接时会弹出对话框，但我看到后台的表格已滚动回到表格的顶部。如果我在桌子上滚动得很好并且我想查看附近几个细胞的细节，这真的很烦人。

我能做些什么来阻止它完全滚动，这样当对话框被解除时，表格与点击链接之前的滚动位置相同？

这是HTML的摘录，显示了其中一个可点击的单元格：

<?php

if (isset($_POST['agregar-admin'])) {
    $nombre = $_POST['nombre'];
    $usuario = $_POST['usuario'];
    $password = $_POST['contraseña'];

    $opciones = array(
        'cost' => 12
    );

    $password_hashed = password_hash($password, PASSWORD_BCRYPT, $opciones);

    try {
        include_once 'funciones/funciones.php';
        $stmt = $conn->prepare("INSERT INTO admins (nombre, usuario, password) VALUES (?, ?, ?)");
        $stmt->bind_param("sss", $nombre, $usuario, $password_hashed);
        $stmt->execute();
        $stmt->close();
        $conn->close();

    } catch (Exception $e) {
        echo "Error: " . $e->getMessage();
    }



}

在Javascript模块中，我导入＆＃34; $ uibModal＆＃34;用于打开对话框的模块。这是一个简短的摘录，显示了该方法的定义：

<div class="container">
    <h3 class="text-center">title</h3>
    <div class="row">
        <table class="table table-bordered">
            <caption style="font-style: italic; font-weight: bold; font-size: medium;">
                Table Caption
            </caption>
            <thead>
                <tr>
                    <th style="text-align: center">Name</th>
                    <th style="text-align: center">5 Minutes</th>
                    <th style="text-align: center">15 Minutes</th>
                    <th style="text-align: center">60 Minutes</th>
                    <th style="text-align: center">180 Minutes</th>
                    <th style="text-align: center">Since Midnight</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="name in ratesList track by $index">
                    <td align="right">{{name}}</td>
                    <td align="right" ng-style="{'background-color': computeBgColor(name, 5)}">
                        <div ng-if="totalCount(name, 5) > 0">
                            <div ng-if="failureCount(name, 5) > 0">
                                <a href="#" ng-click="openErrorCounts(name, '5')">
                                    <span data-toggle="tooltip" title="{{totalCount(name, 5)}} records; yellow: {{yellowThreshold(name, 5)}}%; red: {{redThreshold(name, 5)}}%">
                                        {{successRate(name, 5) | percentage:2}} | {{avgTxTime(name, 5) | number:2}} ms
                                    </span>
                                </a>
                            </div>

有没有切实可行的方法让这项工作更好？

更新：

只是对当前行为的一个小更新：

当我点击链接时，我确实看到背景滚动回到顶部，但我也看到垂直滚动条完全消失。当我关闭对话框时，它实际上会尝试滚动回我单击的行，但它只会使该行成为屏幕上的最后一行，这只是使其可见，而不是将其恢复到原始位置。

添加$ event.stopPropagation（）调用（在多个变体中）对此行为没有影响。

我还在执行此操作时监视控制台日志。唯一的消息是：

        $scope.openErrorCounts  =
        function(name, interval) {
            var modalInstance   = $uibModal.open({
                templateUrl:    'errorCountsDetail.html',
                scope:          $scope,

更新：

我发现当我用Google搜索＆＃34;如何使角度uibModal根本不滚动背景＆＃34;，似乎有几个人试图解决同样的问题。我发现很难确定是否有明确的解决方案。

我尝试了一个简单的解决方案，将其添加到我的页面css：

Possibly unhandled rejection: dismiss

我认为这是一个远景，因为答案是-1-ed。不出所料，它没有效果。

Answer 1

尝试在点击功能后添加$ event.stopPropagation（）。所以你的ng-click代码就是。

<a href="#" ng-click="openErrorCounts(name, '5');$event.stopPropagation();">
    <span data-toggle="tooltip" title="{{totalCount(name, 5)}} records; yellow: {{yellowThreshold(name, 5)}}%; red: {{redThreshold(name, 5)}}%">
        {{successRate(name, 5) | percentage:2}} | {{avgTxTime(name, 5) | number:2}} ms
    </span>
</a>

如何防止angularjs对话框进行背景滚动？

1 个答案: