Angularjs 滚动加载更多数据
下面的例子只是为了简单记录怎么使用angularjs来实现滚动加载数据，具体的还是需要具体看待:
Javascript部分的controller
app.controller('AnalysizerCtrl',['$scope','$timeout','$window',
function($scope,$timeout,$window){
$scope.showData=false;
$scope.isLoadingPIG=false;
$scope.isLoadingUJ=false;
$scope.isLoadingBoxSummary=false;
$scope.LoadingData=function(index){
$scope.showData=true;
varpigHeight=$(".analysisContainer")[1].children[1].scrollHeight;
varujHeight=$(".analysisContainer")[1].children[2].scrollHeight;
varboxSummaryHeight=$(".analysisContainer")[1].children[3].scrollHeight;
if(index==0){
//$scope.reLoadData=true;
pigHeight=0;
ujHeight=0;
$scope.gridOptions.data=null;
}
varshowSummaryBox=function(){
$scope.isLoadingBoxSummary=false;
}
varshowUj=function(){
$scope.isLoadingUJ=false;
//$scope.isLoadingSummaryBox=true;
//$timeout(showSummaryBox,1000);
}
varshowPig=function(){
$scope.isLoadingPIG=false;
//$scope.isLoadingUJ=false;
//$timeout(showUj,10000);
}
if(pigHeight==0){
$scope.isLoadingPIG=true;
$timeout(showPig,1000);
}elseif(ujHeight==0){
$scope.isLoadingUJ=true;
$timeout(showUj,1000);
}elseif(boxSummaryHeight==0){
$scope.isLoadingBoxSummary=true;
$timeout(showSummaryBox,1000);
}
};
}]
).directive('whenScrollEnd',function(){
returnfunction(scope,elm,attr){
varpageWindow=$(this);
pageWindow.bind('scroll',function(et,ed,pb){
varwinScrollTop=pageWindow.scrollTop();
varwinHeight=pageWindow.height();
varmaxScrollHeight=$(".analysisContainer")[1].scrollHeight;
if((winScrollTop+winHeight)>maxScrollHeight){
scope.$apply(attr.whenScrollEnd);
}
});
}
});
下面是HTML部分：
<divclass="analysisContainer"ng-show="showData"when-scroll-end="LoadingData()"> <divid="b"ng-show="isLoadingPIG"style="width:100%;text-align:center;z-index:1"> <h6class="loading"> <imgsrc="~/Content/Images/loading2.gif"/> LoadingWin&Convertdata... </h6> </div> <divid="a"ng-show="!isLoadingPIG"> <imgsrc="~/2016-03-16_152323.png"/> </div> <divng-show="!isLoadingUJ"> <imgsrc="~/2016-03-16_153347.png"/> </div> <divng-show="!isLoadingBoxSummary"> <imgsrc="~/2016-03-16_153404.png"/> </div> </div>
重要的部分是指令(directive)和滚动时要加载数据的部分。
Angularjs滚动加载更多数据的相关知识，小编就给大家介绍这么多，希望对大家有所帮助！