AngularJS:应用DOM更改后滚动到元素结尾

Question

我有一个简单的项目列表.每当我添加更多项目时,我希望能够滚动到显示项目的元素的底部.我知道没有办法挂钩到$apply()函数的末尾,那么我的解决方案可能是什么？

这是一个解释我的问题的方法.添加足够的项目后,ul元素不会滚动到底部...

Answer 1

有非常棒的angularjs-scroll-glue可用,它可以完全满足您的需求.

您需要做的就是将scroll-glue指令应用于容器元素,并且您可以获得您正在寻找的内容.

还有一个演示版.

Answer 2

另一个有效的解决方案是使用$timeout.使用超时值0,angular将等到呈现DOM之后再调用您传递给的函数$timeout.因此,在向列表中添加元素之后,可以使用此元素在滚动到底部之前等待将新元素添加到DOM.

与@Mark Coleman的解决方案一样,这不需要任何额外的外部库.

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 3

一个简单的工作示例(不需要插件或指令)......

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

  $scope.func = function(data) {

    // some data appending here...

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

})

为我做的诀窍就是用anchorScroll命令包装$timeout,这样就解析了范围并自动转移到了页面末尾的元素.

Answer 4

您可以创建一个简单的指令来绑定<ul>每次滚动到底部的单击处理程序.

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

关于jsfiddle的例子