滚动到AngularJS中div的顶部？

Question

我正在使用AngularJS开发一个小型web应用程序，遇到了一个问题。我正在使用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

我在表体滚动时也遇到过同样的问题。我用以下方法解决了这个问题。

这是我的html示例。

<table id="rateplanmapping-scroll">
    <thead>
       <th></th>....
    </thead>
    <tbody >
        <tr ng-repeat="data in datas"> //this is the data
            <td></td>.....
        </tr>
    </tbody>
</table>

这是滚动到顶部的角度代码

<script>

  angular.element("#rateplanmapping-scroll tbody")[0].scrollTop=0; 

</script>

你可以把这个脚本放在需要的函数中，所以当特定的事情发生时，它会自动触发。或者也可以附加到事件。

对于div元素，可以通过以下方式完成

http://plnkr.co/edit/0B4zrFTho6GYuPAS0S1A?p=preview

谢谢

Answer 2

我只需添加一个监视DIV内容的指令，然后每当内容发生变化时，它就会滚动到顶部！此解决方案不需要事件处理（我认为这在这里是不必要的）。

mod.directive('scrollToTop', function(){
    return {
        restrict: 'A',
        link: function postLink(scope, elem, attrs) {
            scope.$watch(attrs.scrollToTop, function() {
                elem[0].scrollTop = 0;
            });
        }
    };
});

然后，html标记将使用该指令来触发滚动，从而：

<div class='myList' data-scroll-to-top='data.items.length'>
  <ul>
    <li data-ng-repeat='item in data.items'>{{item}}</li>
  </ul>
</div>

当您向列表中添加项目时，DIV将滚动到顶部！这里是一个jsFiddle与工作代码：http://jsfiddle.net/pkgbtw59/89/

Answer 3

我也遇到过同样的问题，我通常使用以下通用指令来解决它。它侦听给定的事件，并且每当该事件发生时，它将元素回滚到y=0。当列表更改时，您只需在控制器中执行$broadcast事件。

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">