AngularJS: Прокрутите до конца элемента после применения изменений DOM

Question

У меня есть простой список элементов. Я хочу иметь возможность прокручивать нижнюю часть элемента, отображающего элементы, когда я добавляю больше элементов. Я понял, что нет возможности подключиться к концу функции $apply(), так что может быть моим решением?

Это jsfiddle, чтобы проиллюстрировать мою проблему. после добавления достаточного количества элементов ul элемент не прокручивается до нижней ...

Answer 1

Там в очень удивительным angularjs-scroll-glue доступны, что делает именно то, что вы хотите.

Все, что вам нужно сделать, это применить директиву scroll-glue к вашему элементу контейнера, и вы получите именно то, что ищете.

Имеется также demo.

Answer 2

Вы можете создать простую директиву, которая связывает обработчик кликов, который каждый раз прокручивает <ul>.

myApp.directive("scrollBottom", function(){ 
    return { 
     link: function(scope, element, attr){ 
      var $id= $("#" + attr.scrollBottom); 
      $(element).on("click", function(){ 
       $id.scrollTop($id[0].scrollHeight); 
      }); 
     } 
    } 
}); 

example on jsfiddle

Answer 3

Вы можете использовать AnchorScroll .. здесь документацию: https://docs.angularjs.org/api/ng/service/$anchorScroll

Answer 4

Другим верным решением для этого является использование $timeout. Используя значение тайм-аута 0, угловое будет ждать, пока DOM будет отображаться до вызова функции, которую вы передаете, до $timeout. Итак, после добавления элемента в список вы можете использовать это, чтобы дождаться добавления нового элемента в DOM перед прокруткой вниз.

Как @Mark Colemansolution, для этого не требуются дополнительные внешние библиотеки.

var myApp = angular.module('myApp', []); 
 

 
function MyCtrl($scope, $timeout) { 
 
    $scope.list = ["item 1", "item 2", "item 3", "item 4", "item 5"]; 
 
    $scope.add = function() { 
 
    $scope.list.push("new item"); 
 
    $timeout(function() { 
 
     var scroller = document.getElementById("autoscroll"); 
 
     scroller.scrollTop = scroller.scrollHeight; 
 
    }, 0, false); 
 
    } 
 
}

ul { 
 
    height: 150px; 
 
    overflow: scroll; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <button ng-click="add()">Add</button> 
 
    <ul id="autoscroll"> 
 
     <li ng-repeat="item in list">{{item}}</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 5

Простой рабочий пример (нет необходимости плагинов или директив) ...

.controller('Controller', function($scope, $anchorScroll, $location, $timeout) { 

    $scope.func = function(data) { 

    // some data appending here... 

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

}) 

Трюк, который сделал это для меня было оборачивать anchorScroll команду с $timeout, таким образом область была решена и автоматически переместилась на элемент в конце страницы.

Answer 6

Вы можете добиться этого, используя пользовательский каталог углов.

пример:

<ul style="overflow: auto; max-height: 160px;" id="promptAnswerBlock"> 

<li ng-repeat="obj in objectKist track by $index" on-finish-render="ngRepeatFinished">            

    app.directive('onFinishRender', function($timeout) { 
    return { 
     restrict : 'A', 
     link : function(scope, element, attr) { 
      if (scope.$last === true) { 
       $timeout(function() { 
        $('#promptAnswerBlock').scrollTop($('#promptAnswerBlock')[0].scrollHeight + 150); 
       }); 
      } 
      } 
     } 
    }); 

</li>