我正在开发一个 angularJS 应用程序,该应用程序有一个页面,我使用 ng-repeat 显示大约 30 个项目。每个项目前面都有一个切换按钮(启用/禁用)。使用我现有的代码,我可以切换这些项目。但问题是,如果我向下滚动并切换第 25 项,那么它会自动滚动到页面顶部。如果我现在向下滚动,我可以看到切换实际上发生了。
所以现在的要求是确保点击切换按钮后滚动位置被保留。
请参阅下面我的代码。
HTML
<div id="eventTypes" class="panel-body">
<div ng-if="!spinner" ng-repeat="item in items" class="panel-body">
<div class="row">
<div class="col-md-9">{{item.itemName)}}</div>
<div class="col-md-3">
<input id="toggleEnabled"
type="button"
ng-class="{'btn-primary': item.enabled}"
value="{{item.enabled ? 'enabled' : 'disabled'}}"
ng-click="toggleEnabled(item)">
</div>
</div>
</div>
<div ng-if="spinner" class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
JS
(function () {
'use strict';
angular.module('myApp').controller('itemsController', function ($scope, itemsService) {
var serviceError = function (errorMsg) {
console.log(errorMsg);
$scope.turnOffSpinner();
};
$scope.items = [];
$scope.item = {};
$scope.spinner = true;
$scope.toggleEnabled = function (item) {
$scope.turnOnSpinner();
itemsService.toggleEnabled(item)
.then(function () {
$scope.loaditems();
});
};
$scope.loaditems = function () {
itemsService.getitems().then(function (response) {
$scope.items = response.data;
}, serviceError);
$scope.turnOffSpinner();
};
$scope.turnOnSpinner = function () {
$scope.spinner = true;
};
$scope.turnOffSpinner = function () {
$scope.spinner = false;
};
$scope.loaditems();
});
}());
现在的工作原理是,一旦我单击切换按钮,就会启用微调器。同时, Controller 将调用 itemService.toggleEnabled()
方法,该方法对服务器进行 ajax 调用,以更改后端项目的状态(启用到禁用,反之亦然)。成功更改状态并且 ajax 调用返回时,将在 Controller 中调用 $scope.loadItems()
方法。然后,此方法将执行另一个 ajax 调用来获取项目(现在具有已切换项目的更新状态)。微调器被禁用,然后数据将显示在 UI 上。
当所有这些完成后,页面将滚动到顶部。当我想切换列表中位于最下方的项目时,这很烦人。
我希望当我单击相应项目的切换按钮时页面出现在相同的位置,而不是向上滚动到顶部。
我是 AngularJS 的新手,这方面的任何帮助都会非常有帮助。
最佳答案
看来您的微调方案是导致您出现问题的原因:
...
<div ng-if="!spinner" ng-repeat="item in items" class="panel-body">
...
<div ng-if="spinner" class="spinner">
...
每当您单击按钮时,$scope.turnOnSpinner()
都会从 DOM 中删除 ng-repeat
中的每个元素。这就是为什么它看起来跳到了顶部。它并不是真正的跳跃,只是没有足够的 DOM 元素来填充页面,使得页面如此短以至于滚动条消失(即使只是一秒钟)。然后,当旋转器完成时,您的 ng-repeat
再次用 DOM 元素填充页面,导致滚动位置丢失。
所以基本上,您想要修复的问题是加载旋转器实现不太理想的症状。
ng-if
是 Angular 中隐藏事物的“残酷”方式。它主要是为了比 ng-show/ng-hide 等“更软”的指令隐藏更长的时间。解决您的问题的一种方法是在每个按钮上使用 ng-disabled 来防止用户在旋转器处于事件状态时与其进行交互,而不是硬删除每个元素:
之前:
<div ng-if="!spinner" ng-repeat="item in items" class="panel-body">
<div class="row">
<div class="col-md-9">{{item.itemName)}}</div>
<div class="col-md-3">
<input id="toggleEnabled"
type="button"
ng-class="{'btn-primary': item.enabled}"
value="{{item.enabled ? 'enabled' : 'disabled'}}"
ng-click="toggleEnabled(item)">
</div>
</div>
</div>
之后:
<div ng-repeat="item in items" class="panel-body">
<div class="row">
<div class="col-md-9">{{item.itemName)}}</div>
<div class="col-md-3">
<input id="toggleEnabled"
ng-disabled="spinner"
type="button"
ng-class="{'btn-primary': item.enabled}"
value="{{item.enabled ? 'enabled' : 'disabled'}}"
ng-click="toggleEnabled(item)">
</div>
</div>
</div>
另一个我非常喜欢并自己使用的解决方案是这个 Angular 模块:https://github.com/darthwade/angular-loading
您可以将它附加到页面中的任何元素,它会在其上放置一个加载旋转器,并阻止您与其交互,直到您的 ajax 或其他任何操作完成。
如果您不喜欢其中任何一个,请尝试将 ng-repeat
放入一个容器中,您可以使用该容器在旋转器启动时防止与元素交互:
<div class="container" ng-class="{'you-cant-touch-this': spinner}">
<div ng-repeat="item in items" class="panel-body">
<div class="row">
<div class="col-md-9">{{item.itemName)}}</div>
<div class="col-md-3">
<input id="toggleEnabled"
type="button"
ng-class="{'btn-primary': item.enabled}"
value="{{item.enabled ? 'enabled' : 'disabled'}}"
ng-click="toggleEnabled(item)">
</div>
</div>
</div>
</div>
现在您可以通过某种方式设置其样式以防止交互,而无需从 DOM 中删除所有这些项目:
.you-cant-touch-this {
pointer-events: none;
}
关于javascript - 切换按钮时保留滚动位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40348823/