AngularJS 通过新的属性和表达式扩展了 HTML。本文主要给大家介绍Angularjs 滚动加载更多angular-js的相关知识，需要的朋友参考下吧
下面的例子只是为了简单记录怎么使用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); <em style="color:transparent">来源[email protected]搞@^&代*@码网</em>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部分：
<div class="analysisContainer"> <div id="b" style="width: 100%;text-align: center"> <h6 class="loading"> Loading Win & Convert data... </h6></div><div id="a"> </div><div> </div><div> </div></div>
重要的部分是指令(directive)和滚动时要加载数据的部分。
Angularjs 滚动加载更多angular-js的相关知识，小编就给大家介绍这么多，希望对大家有所帮助！
以上就是Angularjs 滚动加载更多数据的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Angularjs 滚动加载更多数据
转载请注明原文链接：Angularjs 滚动加载更多数据
