滚动到第一个错误不起作用

Scroll to first error not working

本文关键字：不起作用 错误 第一个 滚动      更新时间：2023-09-26

我的控制器中有以下功能

$scope.progress = function () {
    var form = $scope.coverDetails;
    for (i in form) {
        if ($scope.coverDetails[i].hasOwnProperty('$valid') && !$scope.coverDetails[i].$valid) {
            $location.hash(i + '-label');
            break;
        }
    };
    $scope.submitted = true;
    $scope.validateForm();
    if ($scope.coverDetails.$valid) {
        $location.path('/zones');
    }
    $anchorScroll();
};

这有点奏效。但事实并非如此。当我点击提交按钮（调用上面的函数）时，它成功地更新了哈希，但是，ng-class或ng-show指令都没有更新，直到第二次按下按钮，假设$location.hash在第一次和第二次之间没有改变。

其中一个位不工作的例子是

<label id="reg-label" for="reg" ng-class="{'error': coverDetails.reg.$invalid && submitted}">
    Number plate
</label>

在本例中，类'error'没有应用，但如果字段无效，它将滚动到标签。

有谁能帮忙吗？

所以我弄清楚了发生了什么，更改散列会导致临时重新加载，因此必须使用以下代码来防止这种情况

angular.module("ScrollToErrorPrevention", []).factory('$preventErrorReload', ['$route',
    function ($route) {
        return function ($scope) {
            var lastRoute = $route.current;
            $scope.$on('$locationChangeSuccess', function () {
                if (lastRoute.$$route.templateUrl === $route.current.$$route.templateUrl) {
                    $rootScope.$broadcast('locationChangedWithoutReload', $route.current);
                    $route.current = lastRoute;
                }
            });
        };
    }
])

并将其包含在应用程序中，因此：

angular.module('app', ['ScrollToErrorPrevention'])

并从控制器调用工厂方法

angular.module('app').controller('controller', ['$scope', $preventErrorReload, 
    function($scope, $preventErrorReload) {
         $preventErrorReload($scope);
         ...
    }
]);

之后，使用$location.hash(...)和$anchorScroll()可以很好地进行

这项工作并不完全是我自己的，而是从一个或两个（更多？）其他来源修改而来的

相关文章：