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 Coleman的solution，這將不需要任何額外的外部庫。

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(); 
    }) 
    } 

}) 

認爲這樣做是對我來說是用包裹在$timeout命令anchorScroll的訣竅，這樣，範圍就被解決了，並且它自動轉移到頁面末尾的一個元素上。

Answer 6

您可以使用angularjs自定義目錄來實現此目的。

例如：

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