起因
最近在整理公司的前端库避免出现重复造轮子的情况，这里是angularjs滚动条到底部后自动加载数据的demo
infinite-scroll.directive.js
底部自动加载是根据 ngInfiniteScroll 更改的，由于Angular Style Guide提倡手动注入解耦，因此ngInfiniteScroll原来的js文件直接集成不了，这里新建directive。因为是多人开发，要考虑到代码合并后变量冲突因此每个模块应该使用闭包。更改后的ngInfiniteScroll：
(function(){
'user strict' //声明使用js严格模式
angular
.module('app')
.directive('infiniteScroll', infiniteScroll)
.value('THROTTLE_MILLISECONDS', null);
//通过$inject来手动注入依赖从而避免重复注入和其他angular找不到变量的原因，增加了可读性。
infiniteScroll.$inject = ['$rootScope', '$window', '$interval', 'THROTTLE_MILLISECONDS'];
function infiniteScroll ($rootScope, $window, $interval, THROTTLE_MILLISECONDS) {
var directive = {
scope: {
infiniteScroll: '&',
infiniteScrollContainer: '=',
infiniteScrollDistance: '=',
infiniteScrollDisabled: '=',
infiniteScrollUseDocumentBottom: '=',
infiniteScrollListenForEvent: '@'
},
link: link,
restrict: 'EA'
};
return directive;
function link(scope, element, attrs) {
/* */
var changeContainer, checkInterval, checkWhenEnabled, container, handleInfiniteScrollContainer, handleInfiniteScrollDisabled, handleInfiniteScrollDistance, handleInfiniteScrollUseDocumentBottom, handler, height, immediateCheck, offsetTop, pageYOffset, scrollDistance, scrollEnabled, throttle, unregisterEventListener, useDocumentBottom, windowElement;
windowElement = angular.element($window);
scrollDistance = null;
scrollEnabled = null;
checkWhenEnabled = null;
container = null;
immediateCheck = true;
useDocumentBottom = false;
unregisterEventListener = null;
checkInterval = false;
height = function(element) {
element = element[0] || element;
if (isNaN(element.offsetHeight)) {
return element.document.documentElement.clientHeight;
} else {
return element.offsetHeight;
}
};
offsetTop = function(element) {
if (!element[0].getBoundingClientRect || element.css('none')) {
return;
}
return element[0].getBoundingClientRect().top + pageYOffset(element);
};
pageYOffset = function(element) {
element = element[0] || element;
if (isNaN(window.pageYOffset)) {
return element.document.documentElement.scrollTop;
} else {
return element.ownerDocument.defaultView.pageYOffset;
}
};
handler = function() {
var containerBottom, containerTopOffset, elementBottom, remaining, shouldScroll;
if (container === windowElement) {
containerBottom = height(container) + pageYOffset(container[0].document.documentElement);
elementBottom = offsetTop(element) + height(element);
} else {
containerBottom = height(container);
containerTopOffset = 0;
if (offsetTop(container) !== void 0) {
containerTopOffset = offsetTop(container);
}
elementBottom = offsetTop(element) - containerTopOffset + height(element);
}
if (useDocumentBottom) {
elementBottom = height((element[0].ownerDocument || element[0].document).documentElement);
}
remaining = elementBottom - containerBottom;
shouldScroll = remaining <= height(container) * scrollDistance + 1;
if (shouldScroll) {
checkWhenEnabled = true;
if (scrollEnabled) {
if (scope.$$phase || $rootScope.$$phase) {
return scope.infiniteScroll();
} else {
return scope.$apply(scope.infiniteScroll);
}
}
} else {
if (checkInterval) {
$interval.cancel(checkInterval);
}
return checkWhenEnabled = false;
}
};
throttle = function(func, wait) {
var later, previous, timeout;
timeout = null;
previous = 0;
later = function() {
previous = new Date().getTime();
$interval.cancel(timeout);
timeout = null;
return func.call();
};
return function() {
var now, remaining;
now = new Date().getTime();
remaining = wait - (now - previous);
if (remaining <= 0) {
$interval.cancel(timeout);
timeout = null;
previous = now;
return func.call();
} else {
if (!timeout) {
return timeout = $interval(later, remaining, 1);
}
}
};
};
if (THROTTLE_MILLISECONDS != null) {
handler = throttle(handler, THROTTLE_MILLISECONDS);
}
scope.$on('$destroy', function() {
container.unbind('scroll', handler);
if (unregisterEventListener != null) {
unregisterEventListener();
return unregisterEventListener = null;
}
});
handleInfiniteScrollDistance = function(v) {
return scrollDistance = parseFloat(v) || 0;
};
scope.$watch('infiniteScrollDistance', handleInfiniteScrollDistance);
handleInfiniteScrollDistance(scope.infiniteScrollDistance);
handleInfiniteScrollDisabled = function(v) {
scrollEnabled = !v;
if (scrollEnabled && checkWhenEnabled) {
checkWhenEnabled = false;
return handler();
}
};
scope.$watch('infiniteScrollDisabled', handleInfiniteScrollDisabled);
handleInfiniteScrollDisabled(scope.infiniteScrollDisabled);
handleInfiniteScrollUseDocumentBottom = function(v) {
return useDocumentBottom = v;
};
scope.$watch('infiniteScrollUseDocumentBottom', handleInfiniteScrollUseDocumentBottom);
handleInfiniteScrollUseDocumentBottom(scope.infiniteScrollUseDocumentBottom);
changeContainer = function(newContainer) {
if (container != null) {
container.unbind('scroll', handler);
}
container = newContainer;
if (newContainer != null) {
return container.bind('scroll', handler);
}
};
changeContainer(windowElement);
if (scope.infiniteScrollListenForEvent) {
unregisterEventListener = $rootScope.$on(scope.infiniteScrollListenForEvent, handler);
}
handleInfiniteScrollContainer = function(newContainer) {
if ((newContainer == null) || newContainer.length === 0) {
return;
}
if (newContainer.nodeType && newContainer.nodeType === 1) {
newContainer = angular.element(newContainer);
} else if (typeof newContainer.append === 'function') {
newContainer = angular.element(newContainer[newContainer.length - 1]);
} else if (typeof newContainer === 'string') {
newContainer = angular.element(document.querySelector(newContainer));
}
if (newContainer != null) {
return changeContainer(newContainer);
} else {
throw new Error("invalid infinite-scroll-container attribute.");
}
};
scope.$watch('infiniteScrollContainer', handleInfiniteScrollContainer);
handleInfiniteScrollContainer(scope.infiniteScrollContainer || []);
if (attrs.infiniteScrollParent != null) {
changeContainer(angular.element(element.parent()));
}
if (attrs.infiniteScrollImmediateCheck != null) {
immediateCheck = scope.$eval(attrs.infiniteScrollImmediateCheck);
}
return checkInterval = $interval((function() {
if (immediateCheck) {
handler();
}
return $interval.cancel(checkInterval);
}));
}
};
})()
directive的引用方式还是和之前相同，这里注意给directive传值的参数名由于每个大写字母被认为是一个独立的词，而每个词之前是以一个连字符分隔的，infiniteScroll对应的是infinite-scroll。
newGoodsList.controller.js
这里是用商品列表做的例子。
(function (){
'use strict'
angular
.module('app')
.controller('newgoodsListController',newgoodsListController);
newgoodsListController.$inject = ['$stateParams', 'goodsListService'];
function newgoodsListController($stateParams, goodsListService){
var vm = this;
vm.return = true;
vm.cateid = $stateParams.cateid;
//定义默认参数
var keyword = '';
//当前页
var pageIndex = 1;
//每页记录数
var pageSize = 7;
//推荐状态 -1（全部）0（不推荐）1（推荐）
var recommendStatus = -1;
//自定义分类ID（热门标签）
var custom_cateId = '';
//品牌ID
var brand_id = '';
//分类ID
var cate_id = '';
//tag_id 标签ID
var tag_id = '';
//minPrice 最小价格
var minPrice = '';
//maxPrice 最大价格
var maxPrice = '';
// 排序 1:时间 2:价格 3:销量
var order = 1;
//true（升序）false（降序）.
var isAsc = false;
//声明自动加载的锁，当自动加载的数据在请求的时候不会发起新请求
var busy = false;
getGoodsList();
//排序选择
vm.choose = function (num){
if(order == num){
isAsc = !isAsc;
vm.isAsc = isAsc;
}else{
order = num;
vm.filter_num = num;
}
console.log(order+':'+num+':'+isAsc);
getGoodsList();
}
//商品数据请求
function getGoodsList(){
return goodsListService.getGoodsList(keyword, pageIndex, pageSize, recommendStatus, custom_cateId, brand_id, cate_id, tag_id, minPrice, maxPrice, order, isAsc)
.then(function (data){
console.log(data);
vm.goodsList = data.data;
load();//确保自动加载功能在第一次请求成功后再执行
});
}
function load() {
//读取总页数，并且向上取整
var pageTotal = Math.ceil(vm.goodsList.data.rowCount/pageSize);
//页数自加
pageIndex ++;
//自动加载
vm.loadmore = function(){
console.log('jiazai');
//当请求进行中时不发起新请求
if(busy) return;
//发起请求并且阻止新请求
busy=true;
//当请求的页码不大于总页数时
if(pageIndex<=pageTotal){
return goodsListService.getGoodsList(keyword, pageIndex, pageSize, recommendStatus, custom_cateId, brand_id, cate_id, tag_id, minPrice, maxPrice, order, isAsc)
.then(function (data){
console.log(data.data.data.rows);
//将新请求和数据和原来的数据合并
Array.prototype.push.apply(vm.goodsList.data.rows,data.data.data.rows);
busy=false;
pageIndex++;
});
}
}
}
}
})();
下拉到底部自动加载OK！