javascript – 滚动到顶部的div在AngularJS?

我使用AngularJS的小型网络应用程序,并遇到了一个问题。我使用ng-repeat来填充div中的列表。 div具有固定的高度,并设置为overflow-y:auto,这意味着当列表对于div太大时,会出现滚动条。我的问题是,当列表重新绘制,即数据支持重复更改,滚动条不会重置到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>
我有同样的问题,我通常解决它与以下通用指令。它监听一个给定的事件,每当该事件发生,它滚动元素回到y = 0。所有你需要做的是,当你的列表改变时,广播控制器中的事件。

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">
http://stackoverflow.com/questions/24040985/scroll-to-top-of-div-in-angularjs

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 滚动到顶部的div在AngularJS?