javascript - 在 AngularJS 中滚动到 div 的顶部？

Question

我正在为一个小型网络应用程序使用 AngularJS，但遇到了一个问题。我正在使用 ng-repeat 来填充 div 内的列表。 div 具有固定高度并设置为 overflow-y: auto，这意味着当列表对于 div 来说太大时会出现滚动条。我的问题是，当重新绘制列表时，即支持 ng-repeat 的数据发生变化，滚动条不会重置到 div 的顶部。相反，它停留在滚动条在 ng-repeat 更改之前的任何位置。这是非常糟糕的用户体验。我已经尝试了以下但没有任何运气:

<div id="myList">
  <ul>
    <li ng-repeat="item in items">{{item}}</li>
  </ul>
</div>

<a ng-click="switchItems()">Switch</a>

<script>
function MyApp($scope) {
  $scope.switchItems = function() {
    $('#myList').scrollTop();
    $scope.items = [1, 2, 3, 4]; // new items
  };
}
</script>

Answer 1

我遇到过同样的问题，我通常使用以下通用指令解决它。它监听给定的事件，每当该事件发生时，它都会将元素滚动回 y = 0。您需要做的就是 $broadcast 列表更改时 Controller 中的事件。

angular.module("ui.scrollToTopWhen", [])
.directive("scrollToTopWhen", function ($timeout) {
  function link (scope, element, attrs) {
    scope.$on(attrs.scrollToTopWhen, function () {
      $timeout(function () {
        angular.element(element)[0].scrollTop = 0;
      });
    });
  }
});

用法:

// Controller
$scope.items = [...];
$scope.$broadcast("items_changed")

// Template
<div id="myList" scroll-to-top-when="items_changed">