我有一个简单的项目列表,每当我添加更多的项目时,我希望能够滚动到显示项目的元素底部。我了解到没有办法钩入到$apply()
函数的结尾,那么我的解决方案可能是什么?
这里有一个jsfiddle来说明我的问题。添加足够的项目后,ul元素不会滚动到底部...
有一个非常棒的angularjs-scroll-glue可用,它可以做你想要的事情。
你所需要做的就是将scroll-glue
指令应用到你的容器元素上,然后你就会得到你要找的东西。
这里也有一个演示可用。
另一个有效的解决方案是使用 $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>
.controller('Controller', function($scope, $anchorScroll, $location, $timeout) {
$scope.func = function(data) {
// some data appending here...
$timeout(function() {
$location.hash('end');
$anchorScroll();
})
}
})
$timeout
包装anchorScroll命令,这样作用域得到解析,并自动滚动到页面底部的元素。<ul>
滚动到底部。myApp.directive("scrollBottom", function(){
return {
link: function(scope, element, attr){
var $id= $("#" + attr.scrollBottom);
$(element).on("click", function(){
$id.scrollTop($id[0].scrollHeight);
});
}
}
});
<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>