Прокрутите страницу вверх в div в AngularJS?

Я использую AngularJS для небольшого веб-приложения и столкнулся с проблемой. Я использую ng-repeat для заполнения списка внутри div. Div имеет фиксированную высоту и имеет значение overflow-y: auto, что означает, что полоса прокрутки появляется, когда список слишком велик для div. Моя проблема заключается в том, что когда список перерисовывается, т.е. Изменения ng-repeat, поддерживающие данные, полоса прокрутки не имеет значения reset в верхней части 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>

Ответ 1

У меня была такая же проблема, и я обычно решаю ее с помощью следующей общей директивы. Он прослушивает данное событие, и всякий раз, когда это событие происходит, он прокручивает элемент до 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">

Ответ 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/

Ответ 3

Вы также можете использовать $anchorScroll в соответствии с docs

// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');

// call $anchorScroll()
$anchorScroll();

Вам нужно будет обернуть это в течение $timeout:

$timeout(function() {
  $location.hash('myList');
  $anchorScroll();
})

Ответ 4

Я столкнулся с той же проблемой, что и прокрутка тела. Я решил это следующим образом.

Вот мой пример 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>

Вот код angular для прокрутки вверху

<script>

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

</script>

Надеюсь, это поможет. Вы можете поместить этот script в требуемую функцию, поэтому, когда происходит определенное событие, он автоматически запускается. Или также могут быть прикреплены к событию.

Для элемента div это можно сделать следующим образом:

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

Спасибо.