下面的例子只是为了简单记录怎么使用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;var pigheight = $(.analysiscontainer)[1].children[1].scrollheight;var ujheight = $(.analysiscontainer)[1].children[2].scrollheight;var boxsummaryheight = $(.analysiscontainer)[1].children[3].scrollheight;if (index == 0) {//$scope.reloaddata = true;pigheight = 0;ujheight = 0;$scope.gridoptions.data = null;}var showsummarybox = function () {$scope.isloadingboxsummary = false;}var showuj = function () {$scope.isloadinguj = false;//$scope.isloadingsummarybox = true;//$timeout(showsummarybox, 1000);}var showpig = function () {$scope.isloadingpig = false;//$scope.isloadinguj = false;//$timeout(showuj, 10000);}if (pigheight == 0) {$scope.isloadingpig = true;$timeout(showpig, 1000);} else if (ujheight == 0) {$scope.isloadinguj = true;$timeout(showuj, 1000);} else if (boxsummaryheight == 0) {$scope.isloadingboxsummary = true;$timeout(showsummarybox, 1000);}};}]).directive('whenscrollend', function () {return function (scope, elm, attr) {var pagewindow = $(this);pagewindow.bind('scroll', function (et, ed, pb) {var winscrolltop = pagewindow.scrolltop();var winheight = pagewindow.height();var maxscrollheight = $(.analysiscontainer)[1].scrollheight;if ((winscrolltop + winheight) > maxscrollheight) {scope.$apply(attr.whenscrollend);}});}});
下面是html部分:
loading win & convert data...
重要的部分是指令(directive)和滚动时要加载数据的部分。
angularjs 滚动加载更多数据的相关知识,小编就给大家介绍这么多,希望对大家有所帮助!