问题
I have to display more images as the user scrolls down the browser window.I have created a directive for that.But scroll event is not getting fired.
app.directive('whenScrolled', function() {
return function(scope, elm, attr) {
var raw = elm[0];
elm.bind('scroll', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attr.whenScrolled);
}
});
};
});
In LoadMoreItems, I am pushing two new items into the list:
function LoadMoreItems() {
$scope.temp = $scope.allItems[$scope.lastCount];
$scope.items.push({
Name: $scope.temp.Name,
Price: $scope.temp.Price,
StockStatus: $scope.temp.StockStatus,
Picture: $scope.temp.Picture
});
$scope.temp = $scope.allItems[$scope.lastCount + 1];
$scope.items.push({
Name: $scope.temp.Name,
Price: $scope.temp.Price,
StockStatus: $scope.temp.StockStatus,
Picture: $scope.temp.Picture
});
$scope.lastCount += $scope.count;
}
The below function brings all the items specific to the category.
function getAllItemss(cat) {
itemsFactory.getSpecificItems(cat)
.success(function(_items) {
$scope.allItems = _items;
//$scope.items = [];
$scope.lastCount = 0;
LoadMoreItems();
})
.error(function(error) {
$scope.status = 'Unable to load items : ' + error.message;
});
}
HTML:
<div when-Scrolled="LoadMoreItems()"></div>
回答1:
From the scroll docs:
The
scroll
event is sent to an element when the user scrolls to a different place in the element. It applies towindow
objects, but also to scrollable frames and elements with theoverflow
CSS property set toscroll
(orauto
when the element's explicit height or width is less than the height or width of its contents).
So, try to set scroll
css property on your div
, or bind event listener to $window object(e.g. $($window).bind('scroll',listener)
) and do your calculation according to it.
来源:https://stackoverflow.com/questions/22954423/scroll-event-is-not-firing